解析CSS padding屬性的用法和組成

2021-01-07 51CTO
解析CSS padding屬性的用法和組成

你對CSS padding屬性的用法是否了解,它主要用來定義內部白的,並且Padding屬性包含了paddingleft:左補距離,paddingtop:頭頂補距離,paddingright:右補距離,paddingbottom四個部分。

作者:admin來源:dreamdu.com|2010-08-24 08:56

本文向大家描述一下CSS padding屬性的用法和組成,padding,中文"填充"的意思 ,它主要定義邊內補白,希望本文的介紹能讓你有所收穫。

CSS padding屬性 -- 定義邊內補白

取值: {1,4} | inherit

{1,4}: 邊內補白寬度

inherit: 繼承

初始值: 0

繼承性: 否

適用於: 所有元素,,除了table-row-group, table-header-group, table-footer-group, table-row, table-column-group 和 table-column

padding,中文"填充"的意思

Padding屬性包含了paddingleft:左補距離(設置距左內邊距);paddingtop:頭頂補距離(設置距頂部內邊距);paddingright:右補距離(設置距右內邊距);paddingbottom:底補距離(設置距低內邊距)。

CSS padding-right 屬性

padding-right -- 定義右邊內補白

取值: | inherit

: 右邊內補白的寬度

inherit: 繼承

初始值: none

繼承性: 否

適用於: 所有元素

padding:邊內補白,right:右

示例

p#right  {   padding-right: 12px;  }   

CSS padding-left 屬性

padding-left -- 定義左邊內補白

取值: | inherit

: 左邊內補白的寬度

inherit: 繼承

初始值: none

繼承性: 否

適用於: 所有元素

padding:邊內補白,left:左

示例

p#left  {   padding-left: 12px;  }   

CSS padding-top 屬性

padding-top -- 定義上邊內補白

取值: | inherit

: 上邊內補白的寬度

inherit: 繼承

初始值: none

繼承性: 否

適用於: 所有元素

padding:邊內補白,top:上

示例

p#top  {   padding-top: 12px;  }   

CSS padding-bottom 屬性

padding-bottom -- 定義下邊內補白

取值: | inherit

: 下邊內補白的寬度

inherit: 繼承

初始值: none

繼承性: 否

適用於: 所有元素

padding:邊內補白,bottom:下

示例

p#bottom  {   padding-bottom: 12px;  }   

【編輯推薦】

CSS布局時需注意的八大技巧 IE6.0對padding的解讀分析 揭露CSS中margins摺疊現象內幕 DIV+CSS開發Xhtml網頁對SEO優化的影響 DIV CSS網頁布局中對段落進行排版的方法

【責任編輯:

程華權

TEL:(010)68476606】


點讚 0

相關焦點

  • DIV+CSS中padding和margin屬性用法
    DIV+CSS是現在網頁布局的主流,你對其中的padding和margin兩個重要屬性的用法是否了解,這裡和大家分享一下,相信本文介紹一定會讓你有所收穫。
  • 實例解析CSS padding 屬性用法
    實例解析CSS padding 屬性用法 本文向大家介紹一下CSS padding 屬性的定義和用法,padding 簡寫屬性在一個聲明中設置所有內邊距屬性。這個簡寫屬性設置元素所有內邊距的寬度,或者設置各邊上內邊距的寬度。
  • CSS padding屬性用法詳解
    CSS padding屬性用法詳解 本文向大家介紹一下CSS padding屬性的用法,元素的內邊距在邊框和內容區之間,控制該區域最簡單的屬性是padding屬性。
  • CSS padding屬性用法要點
    CSS padding屬性用法要點 CSS padding屬性定義元素的內邊距,本文向大家介紹一下CSS padding屬性的用法,padding 屬性接受長度值或百分比值,但不允許使用負值。
  • css padding屬性設置元素內邊距
    padding屬性定義及用法在css中,padding屬性是一個簡寫屬性,用來設置所有內邊距屬性(填充),將上邊距屬性、右邊距屬性、下邊距屬性、左邊距屬性定義在同一個聲明中。padding:屬性值1;說明:padding屬性有4個屬性值時:四個屬性值分別定義上內邊距、右內邊距、下內邊距、左內邊距;padding屬性有3個屬性值時:屬性值1和屬性值3分別定義上內邊距和下內邊距
  • CSS中padding-top和padding-left屬性的區別
    CSS中padding-top和padding-left屬性的區別 本文向大家描述一下CSS中padding-top和padding-left屬性的區別,padding-top屬性設置元素的上內邊距(空間),而padding-left 屬性設置元素左內邊距(空白)。
  • CSS中padding-left和padding-left屬性的區別和聯繫
    CSS中padding-left和padding-left屬性的區別和聯繫 本文向大家介紹一下CSS中padding-left屬性和 padding-left屬性的區別,padding-left 屬性設置元素左內邊距,而padding-left 屬性設置元素右內邊距。
  • CSS中padding-bottom和padding-right屬性的區別
    CSS中padding-bottom和padding-right屬性的區別 本文向大家介紹一下CSS中padding-bottom 屬性和padding-right屬性的區別,padding-bottom 屬性設置元素的下內邊距(底部空白),而padding-left 屬性設置元素右內邊距(空白)。
  • CSS margin屬性與用法教程
    margin 屬性是css用於在一個聲明中設置所有 margin 屬性的簡寫屬性,margin是css控制塊級元素之間的距離
  • CSS中Padding簡寫用法介紹
    CSS中Padding簡寫用法介紹 你對CSS中Padding簡寫用法是否了解,這裡和大家簡單分享一下,簡單的說,CSS簡寫就是在等效的前提下,把多句CSS代碼簡化成一句。
  • CSS中position屬性的用法和作用
    CSS中position屬性的用法和作用 本文向大家介紹一下CSS中Position屬性的用法和作用,Position屬性有四個可選值,它們分別是:static、absolute、fixed、relative。
  • Padding與line-height的區別
    Padding與line-height的區別 本文和大家分享一下Padding屬性與line-height的區別,這是CSS基礎知識,對盒模型知識與布局以及相關屬性不是很了解的時候,是很容易混淆與分不清楚的。
  • 弄懂css盒子模型從這幾點入手,新手建議收藏!
    盒子模型是樣式表(css)控制頁面的很重要的概念。如果理解了盒子模型和其中每個元素的用法,才能熟練使用css的定位方法和技巧。所有的頁面的元素都可以看成是一個盒子,佔據一定的頁面空間。佔據的空間要比實際使用的空間要大得多。我們可以調整盒子的邊框和距離,來調整盒子(頁面和頁面中的元素)的位置。
  • 前端進階:css必知的幾個底層知識和技巧
    它表明人的心理活動的主體性和積極性。問題學習法就是強調有意注意有關解決問題的信息,使學習有了明確的指向性,從而提高學習效率。在介紹完問題學習法之後,進入我們今天的主題,接下來我會介紹css的一些底層的知識的現象,藉此來讓大家對css有更深入的理解。
  • 實例解析HTML DOM position屬性用法
    實例解析HTML DOM position屬性用法 CSS中position屬性的用法相信大家應該有所了解,這裡向大家描述一下HTML DOM position屬性的定義,position屬性把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
  • 探究CSS display屬性用法
    探究CSS display屬性用法 你對CSS display 屬性的用法是否了解,display 屬性規定元素應該生成的框的類型,它用於定義建立布局時元素生成的顯示框類型。
  • css3 cale()屬性介紹以及自適應布局使用方法
    最近在做項目的時候用到了css3中的cale()屬性,在之前也了解過相關的知識,但都是太膚淺的認知而已,並沒有去深入的了解,今天在寫頁面自適應布局的時候,一位同事推薦說css3中有一個屬性能很好地自適應布局,而且還能計算,不得不想起cale(),咋一看還以為是個函數呢,但是函數又怎麼會出現在css中呢?
  • Margin、Border、Padding屬性的區別和聯繫
    Margin、Border、Padding屬性的區別和聯繫 本文向大家描述一下DIV+CSS中Margin屬性、Border屬性、Padding屬性三者的聯繫與區別,相信本文介紹一定會讓你有所收穫,歡迎大家一起來學習DIV+CSS網頁布局。
  • CSS中position定位和z-index屬性用法詳解
    你對CSS中的position定位和z-index屬性的用法是否了解,position屬性中static、absolute、relative三個參數,這裡和大家分享一下其用法。深入理解CSS中的position定位和z-index屬性由於平時不太用到,所以過去寫CSS的時候對於position屬性的absolute、relative值理解比較模糊,對於z-index的層疊更是摸不著頭腦,除了理解的因素外,各個瀏覽器的不同解析結果也是一個大問題。
  • CSS百分比padding製作圖片自適應布局
    css知識點:當padding/margin取形式為百分比的值時,無論是left/right,還是top/bottom,都是以父元素的width為參照物的!一、CSS百分比padding都是相對寬度計算的在默認的水平文檔流方向下,CSSmargin和padding屬性的垂直方向的百分比值都是相對於寬度計算的,這個和top,bottom等屬性的百分比值不一樣。這麼設計的原因在我的新書(應該不出幾個月就要出版了)中會有說明,這裡不展開。