[CSS學習] padding屬性講解

記：本文可以作為張老師在慕課網上講解課程的學習筆記

定義

padding：通過查MDN文檔可知

the padding property sets the padding space on all sides of an element. The padding ares is the space between the content of the element and its border. Negative values are not allowed.

小實驗：

對於block水平元素

1. padding值如果很大，一定會影響元素的尺寸

2. width如果不是auto而是一個固定值，那么padding值一定會影響元素尺寸

3. width如果是auto或者box-sizing=border-box，只要padding值設置的合理，就不會影響元素尺寸

對於Inline水平元素

水平方向的padding值會影響元素尺寸，而垂直方向的padding值不會影響元素尺寸，只會影響內容區域的高度和背景色。

應用場景: 文字之間的短分割線

inline元素如果有垂直方向的padding值，那么會出現“幽靈空白節點”，會影響元素的高度。通過設置font-size=0可以保持高度不變形。

 

取值

padding的取值不支持負數

padding的百分比數字是基於元素的寬度來計算的

 

標簽元素內置padding值

1. 所有瀏覽器Input/textarea輸入框內置padding

2. 所有瀏覽器Button按鈕內置padding

3. 部分瀏覽器select下拉內置padding

4. 所有瀏覽器radio/checkbox無內置padding

5. button按鈕元素的padding最難控制, padding與高度的計算不兼容

Chrome {padding: 0;}

FireFox  button::-moz-focus-inner{ padding:0; }

IE7 button{ overflow: visible;}

小技巧: 通過label標簽模擬button標簽，達到所有瀏覽器下button的高度一致。

<button id='btn'></button>

<label for='btn'>xx</label>

CSS設置 button{ z-index, margin-left, position}來達到移除屏幕之外的隱藏

label{ display: inline-block; line-height; padding;}

 

 

padding與圖形繪制

a. 如何實現三道杠圖形

使用CSS屬性padding, background-clip

background-clip表示指定對象的背景圖像向外裁剪的區域

屬性值: padding-box(從padding區域開始向外剪裁背景，邊框下面沒有背景，延伸至內邊距外沿)  border-box(從border區域開始向外剪裁背景，背景延伸到邊框外沿)  content-box(從content區域開始向外剪裁背景) text(從前景內容的形狀作為剪裁區域向外剪裁，如此可實現使用背景作為填充色之類的遮罩效果)

 <div class="line-tri"></div> 

.line-tri{
　　width: 15px;
　　height: 30px;
　　padding: 15px 0;
　　border-top: 30px solid;
　　border-bottom: 30px solid;
　　background-color: currentColor;
　　background-clip: content-box;
}