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;
}
