css如何設(shè)置段落之間的距離

發(fā)布時(shí)間：2022-12-14 09:31:18 來(lái)源：億速云閱讀：124 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容介紹了“css如何設(shè)置段落之間的距離”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

通過(guò)CSS設(shè)置上下段落之間距離常見有三種方法，分別如下：

一、line-height行高

我們對(duì)line-height的值設(shè)置越大，段落間距將會(huì)增大，同時(shí)字與字行距也會(huì)增加，不推薦用此line-height樣式設(shè)置段落間距距離。為了觀察效果，我們分別設(shè)置CSS line-height為20px與50px對(duì)比觀察效果。

關(guān)鍵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 注釋： 設(shè)置行高為20px */ 
</style> 
</head> 
<body> 
<p>第一段，第一行<br /> 第二行</p> <p>第二段</p> <p>第三段</p> 
</body>
 </html>

二、css padding內(nèi)補(bǔ)白（內(nèi)邊距）

推薦使用padding設(shè)置段落上下間距。通過(guò)設(shè)置上下內(nèi)補(bǔ)白，內(nèi)距離即可實(shí)現(xiàn)p段落上下間距設(shè)置。

1、設(shè)置上下內(nèi)補(bǔ)白為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注釋： 設(shè)置padding為上下10px */ 
</style> 
</head> 
<body> 
<p>第一段，第一行<br /> 第二行</p> <p>第二段</p> <p>第三段</p> 
</body> 
</html>

三、css margin外邊距

CSS段落間距調(diào)整之margin實(shí)現(xiàn)上下段落之間間距距離樣式設(shè)置，我們知道m(xù)argin是設(shè)置上下左右對(duì)象與對(duì)象之間距離設(shè)置，這里段落也可以使用此css樣式實(shí)現(xiàn)間距。

1、css設(shè)置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注釋： 設(shè)置margin為對(duì)象上下間距10px */ 
  </style> 
  </head> 
  <body>
   <p>第一段，第一行<br /> 第二行</p> <p>第二段</p> <p>第三段</p> 
   </body> 
   </html>

“css如何設(shè)置段落之間的距離”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問(wèn)一下細(xì)節(jié)

css如何設(shè)置段落之間的距離

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽