一、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>的可用性并可访问性隐藏
添加一行样式#con3 li>img {margin: 0padding: 0float: leftclear: both}
即可去除底部多余的空白， 事实上 这不是li的问题 是img的问题，关键在于 img中的 float: left呵呵
我们写了这么多的CSS，也多少了解了margin的一些特性，比如：
不过这里我们要说的当前元素的margin与其父级元素之间产生的效果。
我们以这个DOM结构来举例，.container为最外层的父级元素：
我们先看下上边距的情况，在 .user, .a1, .b1中，无论哪个元素，只要其父级元素没有设置padding-top或者没有其他元素（元素节点或者文本）的输出，那么当前元素的顶部会与其父级元素的顶部对齐，margin-top的边距就会上升到其父级；然后一直向上寻找，直到body元素。
比如上面的结构中，我们给.b1一个margin-top值，最终会上边距会给到了.container
如果我们只想给当前元素一个人margin-top值，并不想影响其父级元素怎么办呢？
1.给其直接父元素一个不为零的padding-top值；
2.给当前元素的前面添加一个高度不为零的兄弟元素，这个兄弟元素可以用 占位隐藏，但不能用 隐藏，因为 会使这个元素的高度变为0；
3.给父元素一个透明的边线： border:1px solid transparent
4.将父元素设置为绝对定位 position:absolute
5.父元素添加 overflow:hidden
6.最后就是考虑是否将margin-top切换成padding-top。
再一个就是下边距的问题，下边距会与上边距产生一模一样的问题，也可以按照这3种方式来解决。不过这里的下边距还有另外一个问题。
我们使用这条语句，将.container的最小高度设置为页面的高度：
我们再给.user或.a1或.b1一个 值，我们会发现，在.user的高度+下边距还远远没有超过.container的高度时，页面就已经产生滚动条了，说明margin-bottom已经作用到.container了。之前没注意到这个现象，是我们的产品在用之前的页面修改后作为新页面的时候，发现产生了滚动条，调试后才发现，原来是里面的一个元素有margin-bottom把整个页面撑开了，造成页面产生了滚动条，底部有一部分的白底。
这个怎么解决呢，解决方法依然同上！
