CSS段落間距調整 P標籤段落上下距離如何設定
阿新 • • 發佈：2019-01-27
CSS對P段落之間間隔距離調整如何設定解決篇
在網頁中文章段落一般我們用html P標籤進行分段，使用P標籤上一段文章與下一段文章中間就會產生距離，如何控制P與P之間間距呢？接下來為大家全方位介紹段落間距距離如何調整與設定。
通過CSS設定上下段落之間距離常見有三種方法，分別如下：
一、line-height行高
我們對line-height的值設定越大，段落間距將會增大，同時字與字行距也會增加，不推薦用此line-height樣式設定段落間距距離。為了觀察效果，我們分別設定CSS line-height為20px與50px對比觀察效果。
關鍵CSS程式碼：p{line-height:22px}
1、line-height為20px案例，DIV+CSS程式碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>段落案例</title>
<style>
p{ line-height:20px}
/* css 註釋： 設定行高為20px */
</style>
</head>
<body>
<p>第一段，第一行<br />
第二行</p> 二、css padding內補白（內邊距）
可以推薦使用padding設定段落上下間距。通過設定上下內補白，內距離即可實現p段落上下間距設定。
關鍵字：p{padding:10px 0}
接下來ThinkCSS以案例演示CSS段落上下距離設定。
1、設定上下內補白為10px(padding:10px 0)
完整css+div程式碼：
<!DOCTYPE html>
<html>
<head>
<meta 三、css margin外邊距
CSS段落間距調整之margin實現上下段落之間間距距離樣式設定，我們知道margin是設定上下左右物件與物件之間距離設定，這裡段落也可以使用此css樣式實現間距。這裡ThinkCSS依然以設定兩組margin樣式進行對比觀察。
關鍵樣式單詞：p{margin:10px 0}
1、css設定margin上下間距為10px,html+css程式碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>段落案例</title>
<style>
p{margin:10px 0}
/* css註釋： 設定margin為物件上下間距10px */
</style>
</head>
<body>
<p>第一段，第一行<br />
第二行</p>
<p>第二段</p>
<p>第三段</p>
</body>
</html> 四、段落間距總結
文章分段，一般使用html p標籤，而對分段間距設定我們推薦使用padding和margin實現，這樣可輕鬆調間距距離，實現段與段之間距離排版美化。