一、padding影响元素尺寸
对于block水平元素
padding值大到一定境界，一定会影响尺寸；
width非auto，padding值会影响尺寸（padding值越大，元素看起来越小）；
width：auto或box-sizing：border-box；同时padding值没有特别的大，不影响尺寸
对于inline水平元素
水平padding会影响尺寸，垂直padding不影响尺寸，但是会影响背景颜色（占据空间变大）
使用这一特性，可以实现高度可控的分割线
复制代码
/*使用inline padding实现 注册 | 退出登录 */
<!--------------HTML代码-------------->
注册<span></span>登录
<!--------------CSS代码-------------->
span{
padding:16px 6px 1px
margin-left:12px
border-left:2px solid
font-size:0
}
复制代码
二、padding的特性
1、padding不支持任何形式的负值
2、padding百分比相对于宽度计算
复制代码
/* block元素实现移动端屏幕题图占一半 */
<div class="container">
<div class="example">
<h2>padding..</h2>
<h3>margin...</h3>
</div>
</div>
<!---------------CSS代码--------------->
.container {
padding:50%//使图片占据移动端屏幕的一半，不用计算各种移动端设备的宽和高
background: url(exp.jpg)
background-size: 100%
position:relatvie
}
.example {
position:absolute
top:0
right:0
bottom:0
left:0
}//文字充满整个屏幕显示
复制代码
3、inline水平元素的padding百分比值
.同样相对于宽度计算
。默认的高度宽度细节有差异
。padding会断行
inline就算是空白元素，padding高和宽也不想等
是因为：inline元素的垂直padding会让“幽灵空白节点”显现，也就是规范中的"strut"出现。
三、标签元素内置padding的使用
1、ol/ul列表
i.ol/ul元素内置padding-left，但是单位是px而不是em；
ii.所以如果字号很小/很大，间距就会很开 （平时开发font-size:是12/14，padding-left:22/25px相对合适）
2、所有浏览器input/textarea输入框内置padding
3、所有浏览器botton按钮内置padding
4、所有浏览器radio/checkbox单复选框无内置padding
5、button按钮元素的padding最难控制!
在不同浏览器上使用不同的padding
i.chrome浏览器 padding:0即可以
ii.FireFox浏览器设置padding:0 左右依然有padding! 可以设置 button:-moz-focus-inner{padding:0}
iii.IE浏览器下 按钮文字越多，左右padding逐渐变大 button{overflow:visible}
padding与高度计算的不兼容
！！！更好的是利用<label>标签模拟按钮，但是有时需要button提交，所以，利用<button>的可用性并可访问性隐藏
1 .vertical-align是line-height的好基友，凡是line-height起作用的地方，vertical-align基本都起作用2 .可以精确控制内联元素的垂直对齐位置
1 .文本之类的的内联元素，比如字符x的下边缘，如果是替换元素就是替换元素的下边缘，比如图片的下边缘
2 .inline-block元素
3 .实践：小图标和后面文字对齐:不受font-size大小影响.但是现在图表应该都是svg吧。精灵图这种感觉资源还是有点大
1 .默认值是baseline,也就是基线对齐，基线就是x的下方，所以可以看到，字母两个字下方是有被裁掉的。
2 .内联元素沿着字母x的下边缘对齐的。对于图片等替换元素，使用元素下边缘作为基线，因此是下方的排列
3 .由于相对字母的下边缘对齐，而中文和部分英文字形的下边缘要低于字母x的下边缘，因此，会给人感觉是明显偏下的，一般都会进行调整vertial-align:10px文字就会在当前基线位置上偏移10px
1 .baseline
2 .top/bottom
3 .middle:这个其实并不是绝对居中的。
4 .bottom
5 .这些值对齐的位置是固定的，不是我们最后想要的精确对齐效果
6 .text-top/text-bottom:盒子顶部和父级内容区域的顶部、底部对齐
1 .正数向上偏移，负数往下偏移。数值大小是相对于基线的
2 .baseline=0
3 .数值类可以之前绝对精确的垂直定位
1 .相对于line-height计算
2 .如果一个元素的line-height是20px那么vertical-align:-25%相当于设置vertical-align:-5px
1 .只能用于内联元素，或者display:table-cell的属性
2 .只能作用在display值为inline,inline-block,inline-table,inline-flex元素上
3 .因此span,strong,em，等内联元素img，button,input等替换元素
4 .不生效的情况:一些css属性会默认改变display的计算值，导致vertical-align不生效
5 .幽灵节点太小，垂直居中无效
1 .vertical-align的百分比值是根据line-height算的
2 .
1 .按照道理来说，此时div的高度应该是line-height的高度，实际确是比这个大
2 .内外文字的font-size不一样，而span标签前面是有一个看不见的幽灵空白节点的，这里我们用x来代替
3 .他原本说的是基线的位置和font-size大小有关系，字体越大，极限的位置越在下面，文字默认都是基线对齐，如果两个字号不一样的文字放在一起的时候，就会发生上下位移，如果位移位置足够大，就会超过行高的限制，出现意外的高度。
4 .但是chrome里面没有发现基线和font-size的大小有关系，感觉还是沿着x下边一起的
5 .但是解决的办法是通用的，那就是两个文字大小一样就可以了,或者文字顶部对齐就可以vertical-align:top
1 .任何一个块级元素，里面有图片，则块级元素高度基本上都要比图片的高度高
2 .间隙产生的三大元凶
4 .解决方法
1 .对于内联元素，如果遇到了不太理解的现象，一定要想到有个看不见的幽灵空白节点和vertical-align熟悉感
1 .无论浏览器尺寸多大，无论弹框尺寸，我们的弹框永远是居中的。
2 .flex实现的:感觉这样更好理解
