那么我們為大家介紹如何通過CSSyangshi_10628_1.html' target='_blank'>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 >
設置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 >
這里對對象 .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 >
以上設置了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 >
不設置樣式即體現p默認樣式。
對于P段落的介紹就這么多，更多精彩請關注php 其它相關文章！
相關閱讀：
html中的label標簽使用方法
HTML標題標簽元素怎么修改
DIV背景圖片background的設置方法
以上就是在HTML里p段落行高行距怎么設置的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。