padding

一、对于block水平元素

（1）当padding的值 突然增大（很大，大于元素宽高），一定会影响尺寸

（2）当width:非auto,不会影响尺寸

（3）当width:auto或者box-sizing为border-box,而且padding值没有暴走，不会已经尺寸

二、对于inline元素

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

实现一个高度可控的分割线

直接使用字符：高度不可控

inline-block控制：

{
display: inline-block;
height: 20px;
width: 2px;
background: #000;
}

inline padding:注册<span></span>退出

span{ padding:16px; 6px 1px;margin-left:12px;border-left:2px solid;font-size:0}

三、关于padding的值

（1）不支持负值

（2）百分比是相对于宽度来说的

比如：轻松实现一个正方形

div{padding:50%}

（3）水平元素的padding百分比值

同样是相对于宽度计算的

默认的高度宽度细节有差异

padding会断行

inline元素的垂直padding会让“幽灵空白节点”显现，也就是规范中的“strut”出现。

四、标签元素的内置padding

（1）ol/ul列表

ol/li内置padding-left,但是单位是px不是em;

例如chrome浏览器下是40px;

所以如果字号很小，间距就会很开，字号很大，序号会爬到容器外面。（一般padding:22px）

（2）表单元素的内置元素

所有浏览器input/textarea输入框内置padding

所有浏览器buttom按钮内置padding

部分浏览器select下拉内置padding,如FireFox IE8+可以设置padding

所有浏览器radio/checkbox单复选框无内置padding

button的padding最难控制

在FireFox浏览器中，即使设置了padding:0左右依然有padding,解决方法：

button::-moz-focus-inner{padding:0}

在IE浏览器中，文字越多，左右padding逐渐变大，解决办法：

button{ overflow:visible;}

而且：

padding与高度计算不兼容

button{

       line-height:20px;

       padding:10px;

       border:none;

}

IE7:45px; IE8+:40px;  FireFox: 42px; Chrome:40px;

但有的时候就是需要按钮：

label{
display: inline-block;
line-height: 20px;
padding: 10px;
background: pink;
}

<button id='btn'></button>
<label for="btn">按钮</label>

五、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;

border-radius:50%;

padding:10px;

border:10px solid;

background-color:currentColor;

background-clip:content-box;

}