怎麼樣設定p段落之間的上下間距？哪些樣式能夠控制
之間行距距離呢？ css行高怎麼寫？今天我們來把這個P段落研究個明明白白，讓大家徹底掌握p行距行高樣式。
那麼我們為大家介紹如何透過CSS樣式設定p段落上下行距，而p是文章段落標籤，控制p段落行距的css div屬性有：
#1、css line-height
2、margin
3、padding
相關與間距行距教學
1、css文字行間距
#2、css 字間距
因為p之間上下距離實作使用margin樣式和padding決定，而line-height也有一定關係。接下來透過實例方法為大家介紹p段落之間行距，透過css實例掌握對p行距設定。
css+div案例描述，為了觀察到效果，我們設置四個DIV 盒子對象，分別在裡面加入p段落，同時對p段落設置不同的行距觀察他們效果，提供效果找出規律從而掌握css設定p行距。
命名分別為".div-a"、".div-b"、".div-c"、".div-d"
在p段落標籤預設樣式中， padding的值預設為0。同時對p文字line-height設定為20px
案例一、對margin上下設定為0
1、完整css+div html程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>p行距实例 在线演示</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>設定margin-top為0,margin-bottom為0,（了解margin auto作用）
透過上述實例觀察出如果將margin-top和margin-bottom的值設定為0，那麼p段落行距就不存在了，效果就與line-height設定行距相同了。
案例二、對margin上下設定為30px
1、完整的html原始碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>p行距实例 在线演示</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>這裡對物件".div-b"設定了CSS margin:30px auto相當於設定margin-top為30px、margin-bottom為30px
透過多margin設定調節行距
透過多margin設定調節行距
#從上述案例我們可以看出透過margin設定可以實現p段落行距。
案例三、對margin上下設定為0,padding上下為20px
1、完整實例HTML程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>p行距实例 在线演示 </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>以上設定了margin-top和margin-bottom均為0，然後我們設定padding-top和padding-bottom值為20px。
透過上述案例可以看出對p設定padding樣式依然可以實現行距間距設定。
案例四、我們不設定margin也不設定padding樣式
我們不對p設定margin樣式和padding樣式，意思就對p不設定樣式看看預設P樣式行距效果。
1、完成DIV CSS實例程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>p行距实例 在线演示 </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>不設定樣式即體現p預設樣式。
對於P段落的介紹就這麼多，更多精彩請關注php中文網其它相關文章！
相關閱讀：
以上是在HTML裡p段落行高行距怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章！
