padding

padding

元素邊框與元素内容之間的空間
Padding(填充)屬性定義元素邊框與元素内容之間的空間[1]。padding 簡寫屬性在一個聲明中設置所有内邊距屬性。設置所有當前或者指定元素内邊距屬性。該屬性可以有1到4個值。當元素的 Padding(填充)(内邊距)被清除時,所"釋放"的區域将會受到元素背景顔色的填充。單獨使用填充屬性是在一個聲明中設置元素的所内邊距屬性。縮寫填充屬性也可以使用,一旦改變一個數值,則padding對應的距離都會改變。CSS padding 屬性的百分比數值是相對于其父元素的 width 計算的,如果改變了父元素的 width,則它們也會改變。
  • 中文名:内邊距
  • 外文名:padding
  • 别名:
  • 定義:元素邊框與元素内容之間的空間
  • 應用方式:電腦軟件

介紹

當元素的 padding(填充)内邊距被清除時,所釋放的區域将會受到元素背景顔色的填充。單獨使用 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:規定應該從父元素繼承外邊距。

百分比數值

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

語法

/* 應用于四個邊 */padding: 1em;/* 垂直方向| 水平方向*/padding: 5% 10%;/* 頂部| 水平方向| 底部*/padding: 1em 2em 2em; /* 頂部| 右邊| 底部| 左邊*/padding: 2px 1em 0 1em;padding: inherit;

取值節

指定一個,兩個,三個或四個下列的值:

<長度>

可指定非負的固定寬度. Seefor details.

<百分比>

相對于包含塊的寬度

指定一個值時 該值指定四個邊的内邊距

指定兩個值時 第一個值指定上下兩邊的内邊距 第二個指定左右兩邊的内邊距

指定三個值時 第一個指定上邊的内邊距.第二個指定左右兩邊 第三個指定下邊

指定四個值時分别為上 右 下 左(順時針順序)

形式語法

 |  ]{1,4}

例子

padding: 5%;                /* 所有邊給 5% padding */ padding: 10px;              /* 所有邊給 10px padding */ padding: 10px 20px;         /*  top and bottom 10px padding  */                            /*  left and right 20px padding  */padding: 10px 3% 20px;      /*  top 10px padding          */                            /*  left and right 3% padding */                            /*  bottom 20px padding       */padding: 1em 3px 30px 5px;  /*  top    1em  padding  */                            /*  right  3px  padding  */                            /*  bottom 30px padding  */                            /*  left   5px  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則是模塊與模塊的空隙。

相關詞條

相關搜索

其它詞條