在網頁中文章段落一般我們用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> <p>第二段</p> <p>第三段</p> </body> </html>
二、css padding內補白（內邊距）
可以推薦使用padding設定段落上下間距。通過設定上下內補白，內距離即可實現p段落上下間距設定。
關鍵字：p{padding:10px 0}
接下來ThinkCSS以案例示範CSS段落上下距離設定。
1、設定上下內補白為10px(padding:10px 0)
完整css+div代碼：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>段落案例</title> <style> p{ padding:10px 0} /* css注釋： 設定padding為上下10px */ </style> </head> <body> <p>第一段，第一行<br /> 第二行</p> <p>第二段</p> <p>第三段</p> </body> </html>
三、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實現，這樣可輕鬆調間距距離，實現段與段之間距離排版美化。
轉載自ThinkCSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
