Padding與line-height的區別

2020-12-14 51CTO

Padding與line-height的區別

本文和大家分享一下Padding屬性與line-height的區別，這是CSS基礎知識，對盒模型知識與布局以及相關屬性不是很了解的時候，是很容易混淆與分不清楚的。

作者：admin來源：52css.com|2010-08-20 15:50

你對Padding屬性與line-height的區別是否了解，這裡向大家描述一下，其實padding是布局設置，對容器進行內邊距定義。而line-height是行距設置，設置對象（如文本）的行高。

Padding屬性與line-height的區別

最近有朋友提出一個問題，padding與line-height的區別。這是CSS基礎知識，對盒模型知識與布局以及相關屬性不是很了解的時候，是很容易混淆與分不清楚的。其實padding是布局設置，對容器進行內邊距定義。而line-height是行距設置，設置對象（如文本）的行高。

Padding屬性簡介

padding是內補丁也叫內邊距，也稱為填充，padding 簡寫屬性在一個聲明中設置所有內邊距屬性。

檢索或設置對象四邊的補丁邊距。

語法：padding:padding-top|padding-right|padding-bottom|padding-left

說明：檢索或設置對象四邊的內補丁。對於td和th對象而言默認值為1。其他對象的默認值為0。

參數：length:長度值；%:百分比，由父元素寬度決定

初始值：對於td和th對象而言默認值為1。其他對象的默認值為0。

繼承性：不可繼承

注釋：不允許使用負值。

如果提供全部四個參數值，將按上－右－下－左的順序作用於四邊。
如果只提供一個，將用於全部的四條邊。
如果提供兩個，***個用於上－下，第二個用於左－右。
如果提供三個，***個用於上，第二個用於左－右，第三個用於下。

內聯對象要使用該屬性，必須先設定對象的height或width屬性，或者設定position屬性為absolute，且不允許負值。

line-height是行高

檢索或設置對象的行高。即字體***端與字體內部頂端之間的距離。

如行內包含多個對象，則應用***行高。此時行高不可為負值。

也就是文本的行距。文本通常是一行或多行組成的，表示各行之間的距離。

例如：

  1. <p>網頁教學網--中國網頁設計,網頁製作***站</p> 

或

  1. <div>網頁教學網--中國網頁設計,網頁製作***站</div> 
  2. p,div{  
  3. padding-top:40px;  
  4. line-height:200%;  
  5. }  
  6.  

最終的效果如圖所示：

【編輯推薦】

  1. CSS教程：詳解margin和padding屬性應用場合
  2. 微軟展示IE9瀏覽器 力推IE8將取代IE6市場
  3. 探究IE和Firefox下的2款HTTP調試工具用法
  4. CSS中padding和margin屬性用法說明
  5. 實現IE6、IE7、IE8多版本瀏覽器共存的五種方法


【責任編輯：

程華權

TEL：（010）68476606】

點讚 0

相關焦點

  • 47 width、height、padding屬性詳解
    height屬性height屬性表示盒子內容的高度。height屬性的單位通常是px，也可以是em和百分數。盒子的height屬性如果不設置，不管這個盒子是不是塊級元素，它將自動的被它裡面的內容撐開，如果這個盒子裡面沒有內容，那麼height的值將默認是0。width和height屬性的單位rem和百分數，主要在移動端開發中用的比較多。
  • 深入理解CSS:font metrics, line-height 以及 vertical-align
    如果height是auto，那麼就使用line-height，content-area嚴格等於line-height。line-box計算的小細節：對於內聯元素， padding和 border會增加背景區域，但不會增加content-area的高度（也不是line-box的高度）。 因此content-area並不總是在屏幕上看到的內容。margin-top和 margin-bottom無效。
  • CSS深入理解學習筆記之line-height
    1、line-height的定義　　定義：兩行文字基線之間的距離。　　註：不同字體之間的基線是不同的。4、line-height各類屬性值　　line-height:normal/<number>/<lenght>/<percent>/inherit;　　normal：默認屬性值。與瀏覽器和元素字體相關。因此為了讓各個瀏覽器兼容性一致，要初始化line-height。
  • css line-height屬性設置行高
    line-height屬性定義及用法在css中，line-height屬性是使用來設置行高，即設置行間的距離。在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離；line-height 與 font-size 的計算值之差（在 CSS 中成為「行間距」）分為兩半，分別加到一個文本行內容的頂部和底部。
  • 面試問我line-height我答錯了?
    # line-height 說一下下面三種情況，p的line-height分別是多少？
  • Margin、Border、Padding屬性的區別和聯繫
    Margin、Border、Padding屬性的區別和聯繫 本文向大家描述一下DIV+CSS中Margin屬性、Border屬性、Padding屬性三者的聯繫與區別，相信本文介紹一定會讓你有所收穫，歡迎大家一起來學習DIV+CSS網頁布局。
  • 前端小知識:為什麼你寫的 height:100% 不起作用?
    所以我們要同時設置這兩者的height，只設置其中一個是不行的：        html,body{            height: 100%;            margin: 0;            padding: 0;        }
  • CSS中padding-top和padding-left屬性的區別
    CSS中padding-top和padding-left屬性的區別 本文向大家描述一下CSS中padding-top和padding-left屬性的區別，padding-top屬性設置元素的上內邊距（空間），而padding-left 屬性設置元素左內邊距（空白）。
  • CSS中padding-bottom和padding-right屬性的區別
    CSS中padding-bottom和padding-right屬性的區別 本文向大家介紹一下CSS中padding-bottom 屬性和padding-right屬性的區別，padding-bottom 屬性設置元素的下內邊距（底部空白），而padding-left 屬性設置元素右內邊距（空白）。
  • CSS中padding-left和padding-left屬性的區別和聯繫
    CSS中padding-left和padding-left屬性的區別和聯繫 本文向大家介紹一下CSS中padding-left屬性和 padding-left屬性的區別，padding-left 屬性設置元素左內邊距，而padding-left 屬性設置元素右內邊距。
  • 巧用margin/padding的百分比值實現高度自適應
    Note that percentages on 『padding-top』 and 『padding-bottom』 are relative to the width of the containing block, not the height (at least in a horizontal flow; in a vertical flow they are relative
  • 柱狀圖、堆疊柱狀圖、瀑布圖有什麼區別?怎樣用Python繪製?(附代碼)
    每個分組中的柱子使用不同顏色或者相同顏色不同透明的方式區別各個分類，各個分組之間需要保持間隔。分組柱狀圖經常用於不同組間數據的比較，這些組都包含了相同分類的數據。例如，展示改革開放以來城鎮與農村人口的變化，不同遊戲公司的休閒、益智、格鬥類App的下載量對比等。圖2-36對比了2015—2017年間不同水果的銷量。
  • CSS百分比padding製作圖片自適應布局
    對於padding屬性而言，任意方向的百分比padding都現對於寬度計算可以讓我們輕鬆實現固定比例的塊級容器，舉個例子，假設現在有個<div>元素：div { padding: 50%; } 或者：div { padding: 100% 0 0; } 或者：div