css段落間距怎麼設定-css教學-PHP中文網

首頁

web前端

css教學

css段落間距怎麼設定

醉折花枝作酒筹

Apr 20, 2021 pm 04:27 PM

css

設定方法：1、使用line-height屬性設置，語法「line-height:高度值」；2、使用padding設定段落上下間距，語法「padding:間距值0」；3、使用margin設定上下段落間距，語法「margin:間距值0」。

css段落間距怎麼設定

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

透過CSS設定上下段落之間距離常見有三種方法，分別如下：

一、line-height行高

我們對line-height的值設定越大，段落間距將會增大，同時字與字行距也會增加，不建議用此line-height樣式設定段落間距距離。為了觀察效果，我們分別設定CSS line-height為20px與50px對比觀察效果。

關鍵CSS程式碼：p{line-height:22px}

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document</title>
<style>
p{ 
    line-height:30px
}
/* css 注释： 设置行高为30px */
</style>
</head>
<body>
<p>第一段，第一行<br /> 第二行</p> <p>第二段</p> <p>第三段</p>
</body>
</html>

二、css padding內補白（內邊距）

建議使用padding設定段落上下間距。透過設定上下內補白，內距離即可實現p段落上下間距設定。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document</title>
<style> 
p{ 
    padding:15px 0
    }
/* css注释： 设置padding为上下15px */
</style>
</head>
<body>
<p>第一段，第一行<br /> 第二行</p>
<p>第二段</p> 
<p>第三段</p>
</body>
</html>

三、css margin外邊距

CSS段落間距調整之margin實現上下段落之間間距距離樣式設置，我們知道margin是設定上下左右物件與物件之間距離設置，這裡段落也可以使用此css樣式來實現間距。

<!DOCTYPE html>
 <html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>document</title>
 <style>
  p{
      margin:10px 0
  } 
  /* css注释： 设置margin为对象上下间距10px */ 
  </style> 
  </head> 
  <body>
   <p>第一段，第一行<br /> 第二行</p> <p>第二段</p> <p>第三段</p> 
   </body> 
   </html>

推薦學習：css影片教學

以上是css段落間距怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn