padding

padding

Padding(填充)屬性定義元素框線與元素內容之間的空間。

padding 簡寫屬性在一個聲明中設定所有內邊距屬性。設定所有當前或者指定元素內邊距屬性。該屬性可以有1到4個值。

當元素的 Padding(填充)(內邊距)被清除時,所"釋放"的區域將會受到元素背景顏色的填充。

單獨使用填充屬性是在一個聲明中設定元素的所內邊距屬性。縮寫填充屬性也可以使用,一旦改變一個數值,則padding對應的距離都會改變。

基本介紹

  • 中文名:內邊距
  • 外文名:padding
  • 定義:元素框線與元素內容之間的空間
  • 套用方式:電腦軟體
簡介,語法結構,瀏覽器支持,可能的值,padding屬性內邊距的百分比數值,CSS padding簡潔寫法,內外距離區別,

簡介

這個簡寫屬性設定元素所有內邊距的寬度,或者設定各邊上內邊距的寬度。行內非替換元素上設定的內邊距不會影響行高計算;因此,如果一個元素既有內邊距又有背景,從視覺上看可能會延伸到其他行,有可能還會與其他內容重疊。元素的背景會延伸穿過內邊距。不允許指定負邊距值。

語法結構

padding-top:20px;上內邊距padding-right:30px;右內邊距padding-bottom:30px;下內邊距padding-left:20px;左內邊距padding:1px四邊統一內邊距padding:1px1px上下,左右內邊距padding:1px1px1px上,左右,下內邊距padding:1px1px1px1px上,右,下,左內邊距
注釋:不允許使用負值。

瀏覽器支持

所有瀏覽器都支持 padding 屬性。
注釋:任何的版本的Internet Explorer (包括 IE8)都不支持屬性值 "inherit"。

可能的值

auto:瀏覽器計算外邊距
length:規定以具體單位計的外邊距值,比如像素、厘米等。默認值是 0px。
%:規定基於父元素的寬度的百分比的外邊距。
inherit:規定應該從父元素繼承外邊距。

padding屬性內邊距的百分比數值

CSS padding 屬性的百分比數值是相對於其父元素的 width 計算的,如果改變了父元素的 width,則它們也會改變。

CSS padding簡潔寫法

我們可以使用padding屬性來設定四個方向的內邊距。在實際編程中,我們往往使用的是padding的這種高效簡潔寫法來編程。
padding寫法有3種,分別如下:
padding:像素值;padding:像素值1 像素值2;padding:像素值1 像素值2 像素值3 像素值4;
例如:
“padding:20px;”表示四個方向的內邊距都是20px;
“padding:20px 40px;”表示padding-top和padding-bottom為20px,padding-right和padding-left為40px。
“padding:20px 40px 60px 80px;”表示padding-top為20px,padding-right為40px,padding-bottom為60px,padding-left為80px。大家按照順時針方向記憶就可以了。

內外距離區別

margin與padding如何進行區分,這是很多學html人的困擾,其實說白了padding 就是內容與框線的空隙。而margin則是模組與模組的空隙。
padding與margin的盒子模型圖解padding與margin的盒子模型圖解

相關詞條

熱門詞條

聯絡我們