1. padding 与容易尺寸关系复杂

1.1 对于 block 水平元素

1. { width: 50cm; padding: 0 15cm; } 容器占据宽度尺寸为 80cm;

2. 如果 width: auto 或者 box-sizing: border-box 时。增加 padding 会使元素的 content area 宽度减小；但是如果 padding 的值大于宽度了，还是会改变容器的宽度，且内容区域变为内联元素的最小宽度。

   
   设置 padding 值大于宽度值时，width 变大，内容区域变为内联元素的最小宽度

3. 结论
   下图第二点：宽度非 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 百分比值

1. 同样相对于宽度计算。
2. 默认的宽度和高度细节有差异。因为 inline 元素的垂直 padding 会让“幽灵空白节点”显现，也就是规范中的“strut”出现。“幽灵空白节点”是 inline 元素的 content area，设置 font-size: 0; 可消除，设置 line-height 没用。
3. 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 与画图

1. 三道杠

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

2. 波浪圆

<div class="eye"></div>
.eye {
   width: 150px; height: 150px;
   padding: 10px;
   border: 10px solid;
   border-radius: 50%;
   background-color: currentColor;
   background-clip: content-box;
}