css padding的深入理解

padding

padding可以理解为脂肪层，会增加元素的尺寸

相对于block元素

当box-sizing是border－box时候或者width:auto 元素width不会变，但当paddin大于width时，元素宽度会增加，元素内的文字会以內联元素的最小宽度显示。

相对于inline水平元素

水平padding影响尺寸，垂直padding会影响尺寸，但会影响背景色（占据空间）

padding负值和百分比

• padding不支持任何形式的负值

• padding百分比均是相对于宽度计算的

利用这一特性实现正方形div{ padding: 50% }

• 內联元素的padding百分比
  1. 同样相对于宽度计算
  2. 默认的高度宽度细节有差异
  3. padding会断行

直接使用padding: 50%不会显示正方形，设置font-size: 0才会显示正方形

标签元素的内置paading

1. ol/li元素内置padding-left, 但单位是px不是em;
2. 例如chrom浏览器下是40px;
3. 所以如果字号很小，间距就会很开；
4. 如果字号很大，序号就会爬到容器外面
   网页开发时，设置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与图形绘制

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