複製鏈接
請複製以下鏈接發送給好友
https://baike.baidu.hk/item/padding/10293503
複製
複製成功

padding

鎖定
Padding [1]  （填充）屬性定義元素邊框與元素內容之間的空間。
padding 簡寫屬性在一個聲明中設置所有內邊距屬性。設置所有當前或者指定元素內邊距屬性。該屬性可以有1到4個值。
當元素的 Padding（填充）（內邊距）被清除時，所"釋放"的區域將會受到元素背景顏色的填充。
單獨使用填充屬性是在一個聲明中設置元素的所內邊距屬性。縮寫填充屬性也可以使用，一旦改變一個數值，則padding對應的距離都會改變。
中文名
內邊距
外文名
padding
定    義
元素邊框與元素內容之間的空間
應用方式
電腦軟件

目錄

  1. 1 介紹
  2. ▪ 語法結構
  3. ▪ 瀏覽器支持
  4. ▪ 可能的值
  5. 2 padding屬性內邊距的百分比數值
  1. 3 語法
  2. ▪ 取值節
  3. ▪ 形式語法
  4. 4 例子
  5. 5 CSS padding簡潔寫法
  1. 6 內外距離區別

padding介紹

當元素的 padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充。單獨使用 padding 屬性可以改變上下左右的填充。

padding語法結構

padding-top:20px;上內邊距


padding-right:30px;右內邊距


padding-bottom:30px;下內邊距

padding-left:20px;左內邊距

padding:1px四邊統一內邊距

padding:1px1px上下,左右內邊距

padding:1px1px1px上,左右,下內邊距

padding:1px1px1px1px上,右,下,左內邊距
註釋：不允許使用負值。

padding瀏覽器支持

所有瀏覽器都支持 padding 屬性。
註釋：任何的版本的Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。

padding可能的值

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

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

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

padding語法

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

padding取值節

指定一個，兩個，三個或四個下列的值 [3]  ：
  • <長度>
  • 可指定非負的固定寬度. See<length>for details.
  • <百分比>
  • 相對於包含塊的寬度
  • 指定一個值時 該值指定四個邊的內邊距
  • 指定兩個值時 第一個值指定上下兩邊的內邊距 第二個指定左右兩邊的內邊距
  • 指定三個值時 第一個指定上邊的內邊距.第二個指定左右兩邊 第三個指定下邊
  • 指定四個值時分別為上 右 下 左（順時針順序）

padding形式語法

[ <length> | <percentage> ]{1,4}

padding例子

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  */

paddingCSS padding簡潔寫法

我們可以使用padding屬性來設置四個方向的內邊距。在實際編程中，我們往往使用的是padding的這種高效簡潔寫法來編程。 [4] 
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。大家按照順時針方向記憶就可以了。

padding內外距離區別

padding與margin的盒子模型圖解 padding與margin的盒子模型圖解
margin與padding如何進行區分，這是很多學html人的困擾，其實説白了padding 就是內容與邊框的空隙。而margin則是模塊與模塊的空隙。 [5] 
參考資料