在HTML里p段落行高行距如何設(shè)置
發(fā)表時(shí)間:2023-12-25 來(lái)源:明輝站整理相關(guān)軟件相關(guān)文章人氣:
[摘要]怎么樣設(shè)置p段落之間的上下間距?哪些樣式能夠控制<p>之間行距距離呢?css行高怎么寫(xiě)?今天我們來(lái)把這個(gè)P段落研究個(gè)明明白白,讓大家徹底掌握p行距行高樣式。那么我們?yōu)榇蠹医榻B如何通過(guò)CSS樣式設(shè)置p段落上下行距,而p是文章段落標(biāo)簽,控制p段落行距的css div屬性有:1、css li...
怎么樣設(shè)置p段落之間的上下間距?哪些樣式能夠控制<p>之間行距距離呢?css行高怎么寫(xiě)?今天我們來(lái)把這個(gè)P段落研究個(gè)明明白白,讓大家徹底掌握p行距行高樣式。
那么我們?yōu)榇蠹医榻B如何通過(guò)CSS樣式設(shè)置p段落上下行距,而p是文章段落標(biāo)簽,控制p段落行距的css div屬性有:
1、css line-height
2、margin
3、padding
相關(guān)與間距行距教程
1、css文字行間距
2、css 字間距
因?yàn)閜之間上下距離實(shí)現(xiàn)使用margin樣式和padding決定,而line-height也有一定關(guān)系。接下來(lái)通過(guò)實(shí)例方法為大家介紹p段落之間行距,通過(guò)css實(shí)例掌握對(duì)p行距設(shè)置。
css+div案例描述,為了觀察到效果,我們?cè)O(shè)置四個(gè)DIV 盒子對(duì)象,分別里面加入p段落,同時(shí)對(duì)p段落設(shè)置不同的行距觀察他們效果,提供效果找出規(guī)律從而掌握css設(shè)置p行距。
命名分別為".div-a"、".div-b"、".div-c"、".div-d"
在p段落標(biāo)簽?zāi)J(rèn)樣式中,padding的值默認(rèn)為0。同時(shí)對(duì)p文字line-height設(shè)置為20px
案例一、對(duì)margin上下設(shè)置為0
1、完整css+div html代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>p行距實(shí)例 在線(xiàn)演示</title>
<style>
p{ line-height:20px}
.div-a p{ margin:0 auto}
</style>
</head>
<body>
<div class="div-a">
<p>第一段</p>
<p>第二段<br />第二段第二行</p>
<p>第三段</p>
</div>
</body>
</html>
設(shè)置margin-top為0,margin-bottom為0,(了解margin auto作用)
通過(guò)以上實(shí)例觀察出如果將margin-top和margin-bottom的值設(shè)置為0,那么p段落行距就不存在了,效果就與line-height設(shè)置行距相同了。
案例二、對(duì)margin上下設(shè)置為30px
1、完整的html源代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>p行距實(shí)例 在線(xiàn)演示</title>
<style>
p{ line-height:20px}
.div-b p{ margin:30px auto}
</style>
</head>
<body><div class="div-b">
<p>第一段</p>
<p>第二段<br />第二段第二行</p>
<p>第三段</p>
</div>
</body>
</html>
這里對(duì)對(duì)象".div-b"設(shè)置了CSS margin:30px auto相當(dāng)于設(shè)置margin-top為30px、margin-bottom為30px
通過(guò)多margin設(shè)置調(diào)節(jié)行距
通過(guò)多margin設(shè)置調(diào)節(jié)行距
從以上案例我們可以看出通過(guò)margin設(shè)置可以實(shí)現(xiàn)p段落行距。
案例三、對(duì)margin上下設(shè)置為0,padding上下為20px
1、完整實(shí)例HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>p行距實(shí)例 在線(xiàn)演示 </title>
<style>
p{ line-height:20px}
.div-c p{ margin:0 auto; padding:20px 0}
</style>
</head>
<body>
<div class="div-c">
<p>第一段</p>
<p>第二段<br />第二段第二行</p>
<p>第三段</p>
</div>
</body>
</html>
以上設(shè)置了margin-top和margin-bottom均為0,然后我們?cè)O(shè)置padding-top和padding-bottom值為20px。
通過(guò)以上案例可以看出對(duì)p設(shè)置padding樣式依然可以實(shí)現(xiàn)行距間距設(shè)置。
案例四、我們不設(shè)置margin也不設(shè)置padding樣式
我們不對(duì)p設(shè)置margin樣式和padding樣式,意思就對(duì)p不設(shè)置樣式看看默認(rèn)P樣式行距效果。
1、完成DIV CSS實(shí)例代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>p行距實(shí)例 在線(xiàn)演示 </title>
<style>
p{ line-height:20px}
.div-d p{ }
</style>
</head>
<body>
<div class="div-d">
<p>第一段</p>
<p>第二段<br />第二段第二行</p>
<p>第三段</p>
</div>
</body>
</html>
不設(shè)置樣式即體現(xiàn)p默認(rèn)樣式。
對(duì)于P段落的介紹就這么多,更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!
相關(guān)閱讀:
html中的label標(biāo)簽使用方法
HTML標(biāo)題標(biāo)簽元素怎么修改
DIV背景圖片background的設(shè)置方法
以上就是在HTML里p段落行高行距怎么設(shè)置的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ),涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。