CSS padding屬性用法要點

2021-01-07 51CTO
CSS padding屬性用法要點

CSS padding屬性定義元素的內邊距,本文向大家介紹一下CSS padding屬性的用法,padding 屬性接受長度值或百分比值,但不允許使用負值。

作者:admin來源:68tt.com|2010-08-25 13:33

本文向大家描述一下CSS padding屬性的用法,CSS padding 屬性定義元素邊框與元素內容之間的空白區域。

CSS padding屬性

元素的內邊距在邊框和內容區之間。控制該區域最簡單的屬性是 padding 屬性。CSS padding 屬性定義元素邊框與元素內容之間的空白區域。

CSS padding 屬性簡介

CSS padding 屬性定義元素的內邊距。padding 屬性接受長度值或百分比值,但不允許使用負值。

例如,如果您希望所有 h1 元素的各邊都有 10 像素的內邊距,只需要這樣:

h1 {padding: 10px;}您還可以按照上、右、下、左的順序分別設置各邊的內邊距,各邊均可以使用不同的單位或百分比值:

h1 {padding: 10px 0.25em 2ex 20%;}

單邊內邊距屬性

也通過使用下面四個單獨的屬性,分別設置上、右、下、左內邊距:

padding-top   padding-right   padding-bottom   padding-left   

您也許已經想到了,下面的規則實現的效果與上面的簡寫規則是完全相同的:

h1 {    padding-top: 10px;    padding-right: 0.25em;    padding-bottom: 2ex;    padding-left: 20%;    }  

內邊距的百分比數值

前面提到過,可以為元素的內邊距設置百分數值。百分數值是相對於其父元素的 width 計算的,這一點與外邊距一樣。所以,如果父元素的 width 改變,它們也會改變。

下面這條規則把段落的內邊距設置為父元素 width 的 10%:

p {padding: 10%;}例如:如果一個段落的父元素是 div 元素,那麼它的內邊距要根據 div 的 width 計算。

<div style="width: 200px;"> <p>This paragragh is contained within a DIV that   has a width of 200 pixels.</p> </div>   

注意:上下內邊距與左右內邊距一致;即上下內邊距的百分數會相對於父元素寬度設置,而不是相對於高度。
 
CSS 內邊距屬性

【編輯推薦】

CSS中Padding簡寫用法介紹 IE6.0對padding的解讀分析 CSS border-collapse屬性用法解析 CSS中使用margin屬性定義網頁邊距 CSS中cellspacing和cellpadding屬性用法揭秘

【責任編輯:

程華權

TEL:(010)68476606】

點讚 0

相關焦點

  • DIV+CSS中padding和margin屬性用法
    DIV+CSS是現在網頁布局的主流,你對其中的padding和margin兩個重要屬性的用法是否了解,這裡和大家分享一下,相信本文介紹一定會讓你有所收穫。
  • css padding屬性設置元素內邊距
    padding屬性定義及用法在css中,padding屬性是一個簡寫屬性,用來設置所有內邊距屬性(填充),將上邊距屬性、右邊距屬性、下邊距屬性、左邊距屬性定義在同一個聲明中。padding:屬性值1;說明:padding屬性有4個屬性值時:四個屬性值分別定義上內邊距、右內邊距、下內邊距、左內邊距;padding屬性有3個屬性值時:屬性值1和屬性值3分別定義上內邊距和下內邊距
  • CSS padding屬性用法詳解
    CSS padding屬性用法詳解 本文向大家介紹一下CSS padding屬性的用法,元素的內邊距在邊框和內容區之間,控制該區域最簡單的屬性是padding屬性。
  • 實例解析CSS padding 屬性用法
    實例解析CSS padding 屬性用法 本文向大家介紹一下CSS padding 屬性的定義和用法,padding 簡寫屬性在一個聲明中設置所有內邊距屬性。這個簡寫屬性設置元素所有內邊距的寬度,或者設置各邊上內邊距的寬度。
  • 解析CSS padding屬性的用法和組成
    解析CSS padding屬性的用法和組成 你對CSS padding屬性的用法是否了解,它主要用來定義內部白的,並且Padding屬性包含了paddingleft:左補距離,paddingtop:頭頂補距離,paddingright:右補距離,paddingbottom四個部分。
  • CSS margin屬性與用法教程
    margin 屬性是css用於在一個聲明中設置所有 margin 屬性的簡寫屬性,margin是css控制塊級元素之間的距離
  • CSS中padding-top和padding-left屬性的區別
    CSS中padding-top和padding-left屬性的區別 本文向大家描述一下CSS中padding-top和padding-left屬性的區別,padding-top屬性設置元素的上內邊距(空間),而padding-left 屬性設置元素左內邊距(空白)。
  • CSS中Padding簡寫用法介紹
    CSS中Padding簡寫用法介紹 你對CSS中Padding簡寫用法是否了解,這裡和大家簡單分享一下,簡單的說,CSS簡寫就是在等效的前提下,把多句CSS代碼簡化成一句。
  • 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 屬性設置元素右內邊距。
  • CSS中position屬性的用法和作用
    CSS中position屬性的用法和作用 本文向大家介紹一下CSS中Position屬性的用法和作用,Position屬性有四個可選值,它們分別是:static、absolute、fixed、relative。
  • Padding與line-height的區別
    作者:admin來源:52css.com|2010-08-20 15:50
  • 探究CSS display屬性用法
    探究CSS display屬性用法 你對CSS display 屬性的用法是否了解,display 屬性規定元素應該生成的框的類型,它用於定義建立布局時元素生成的顯示框類型。
  • css3 cale()屬性介紹以及自適應布局使用方法
    最近在做項目的時候用到了css3中的cale()屬性,在之前也了解過相關的知識,但都是太膚淺的認知而已,並沒有去深入的了解,今天在寫頁面自適應布局的時候,一位同事推薦說css3中有一個屬性能很好地自適應布局,而且還能計算,不得不想起cale(),咋一看還以為是個函數呢,但是函數又怎麼會出現在css中呢?
  • CSS百分比padding製作圖片自適應布局
    css知識點:當padding/margin取形式為百分比的值時,無論是left/right,還是top/bottom,都是以父元素的width為參照物的!一、CSS百分比padding都是相對寬度計算的在默認的水平文檔流方向下,CSSmargin和padding屬性的垂直方向的百分比值都是相對於寬度計算的,這個和top,bottom等屬性的百分比值不一樣。這麼設計的原因在我的新書(應該不出幾個月就要出版了)中會有說明,這裡不展開。
  • 學習筆記 CSS clip屬性用法指導
    學習筆記 CSS clip屬性用法指導 你對CSS clip 屬性的用法是否了解,這裡向大家簡單描述一下,clip 屬性剪裁絕對定位元素,即這個屬性用於定義一個剪裁矩形。
  • 對CSS中的Position、Float屬性的一些深入探討
    1、HTML布局的基本要點(點我直接跳轉)2、Position屬性(點我直接跳轉)屬性值介紹用法介紹一些關於position的小知識3、Float屬性(點我直接跳轉)屬性值介紹用法介紹與Position之間的兼容問題HTML布局的基本要點:
  • CSS背景屬性Background詳解
    CSS背景屬性Background詳解本文詳解了CSS的背景屬性Background,包括CSS3中新增的背景屬性。如果你是個CSS初學者,還可以查看之前介紹的CSS浮動屬性和CSS透明屬性詳解。
  • CSS沒那麼難,入門篇(一)
    background-origin:背景圖相對定位,值padding-box(填充框相對位置,邊框內)、border-box(默認邊界框相對位置,包括邊框)、content-box(內容相對位置,減去內邊距的位置),屬性生效需設置背景圖像。
  • CSS 絕對定位屬性absolute用法初探
    CSS 絕對定位屬性absolute用法初探 本文向大家介紹一下CSS絕對定位屬性:absolute屬性的用法,CSS絕對定位使元素的位置與文檔流無關,因此不佔據空間。