padding
padding可以理解为脂肪层，会增加元素的尺寸
相对于block元素
当box-sizing是border－box时候或者width:auto 元素width不会变，但当paddin大于width时，元素宽度会增加，元素内的文字会以內联元素的最小宽度显示。
相对于inline水平元素
水平padding影响尺寸，垂直padding会影响尺寸，但会影响背景色（占据空间）
padding负值和百分比
padding不支持任何形式的负值
padding百分比均是相对于宽度计算的
利用这一特性实现正方形div{ padding: 50% }
- 內联元素的padding百分比
- 同样相对于宽度计算
- 默认的高度宽度细节有差异
- padding会断行
直接使用padding: 50%不会显示正方形，设置font-size: 0才会显示正方形
标签元素的内置paading
- ol/li元素内置padding-left, 但单位是px不是em;
- 例如chrom浏览器下是40px;
- 所以如果字号很小，间距就会很开；
- 如果字号很大，序号就会爬到容器外面
网页开发时，设置padding-left值为22px 24px
- 所有浏览器input/textarea输入框内置padding
- 所有浏览器button按钮内置padding
- 所有浏览器radio/chexbox单复选框无内置padding
- button按钮元素的padding最难控制
button使用：
<button id="btn"></button>
<label for="btn">按钮</label>
label {
display: inline-block;
line-height: 20px;
padding: 10px;
}
此时，label元素的高度是40px
padding与图形绘制
.box {
width: 150px; height: 30px;
padding: 15px 0;
border-bottom: 30px solid;
border-top: 30px solid;
background-color: black;
background-clip: content-box;
} //使background-color不覆盖padding
