1. padding 與容易尺寸關系復雜
1.1 對于 block 水平元素
-
{ width: 50cm; padding: 0 15cm; }容器占據寬度尺寸為 80cm; -
如果 width: auto 或者 box-sizing: border-box 時。增加 padding 會使元素的 content area 寬度減小；但是如果 padding 的值大于寬度了，還是會改變容器的寬度，且內容區域變為內聯元素的最小寬度。
設置 padding 值大于寬度值時，width 變大，內容區域變為內聯元素的最小寬度 -
結論
下圖第二點：寬度非 auto 且 box-sizing 非 border-box，padding 影響尺寸。
padding 與 block 水平元素
1.2 對于 inline 水平元素
如果繼續增大 padding，會增大 scrollHeight。
padding 與 inline 水平元素
1.3 實例
使用 padding 實現垂直對齊。
高度可控的分割線
2. padding 負值與百分比值
2.1 padding 不支持任何形式的負值 >.<
2.2 百分比值
與 margin 類似，都是相對于 width 來計算的。
通過 padding: 50%; 可實現一個與父容器等寬的正方形。
2.3 inline 水平元素的 padding 百分比值
- 同樣相對于寬度計算。
- 默認的寬度和高度細節有差異。因為 inline 元素的垂直 padding 會讓“幽靈空白節點”顯現，也就是規范中的“strut”出現。“幽靈空白節點”是 inline 元素的 content area，設置
font-size: 0;可消除，設置 line-height 沒用。 - padding 會斷行。
3. 標簽元素的內置 padding
很多標簽元素都有內置的 padding，比如 ul/ol，表單項。
button 標簽的 padding 設置后的 width/height 計算不兼容。
視頻地址
/* 使用 label 來模擬 button，因為 button 兼容性不好
<button id="btn"></button>
<label for="btn">按鈕</label>
label {
display: inline-block;
padding: 10px;
line-height: 20px;
}
4. padding 與畫圖
- 三道杠
<div class="line-tri"></div>
.line-tri {
width: 150px; height 30px;
padding: 15px 0;
border-top: 30px solid;
border-bottom: 30px solid;
background-color: currentColor;
background-clip: content-box;
}
- 波浪圓
<div class="eye"></div>
.eye {
width: 150px; height: 150px;
padding: 10px;
border: 10px solid;
border-radius: 50%;
background-color: currentColor;
background-clip: content-box;
}
