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}

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

登入後複製

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

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

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

登入後複製

三、css margin外邊距

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

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

登入後複製

推薦學習：css影片教學

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

本網站聲明

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