1.基本属性
(1) 负值
不存在
(2) 百分比
只相对父级宽度进行计算
.father{
width:100%;
}
.son{
padding:50%;
line-height:0;
}
子元素四边均为50%宽，所以子元素是以父元素为宽度的一个正方形。
(3) px
padding:1px 2px 3px 4px;
表示上内边距为1px,右内边距为2px,下内边距为3px,左内边距为4px。
2.在块状元素和内联元素中的作用
(1) block元素
如果width为auto或者box-sizing:border-box，且padding不是故意设置很大，padding不会影响尺寸。
原因：width为auto时，相当于宽度100%，此时padding只会让内容区域变小，而box-sizing是css3属性，具体看介绍。
如果width不为auto，那么此时padding将会对尺寸造成影响。
如果padding值特别大，那么会对尺寸产生影响。
(2) inline元素
行级元素padding只在水平方向有效，竖直方法只会影响行级元素的背景。
3.应用在布局
两列布局
实现上面的效果，我们可以有两种方法。
第一种
.father{
padding-left:200px;
}
img{
position:absolute;
margin-left:-200px;
}
第二种
img{
float:left;
}
右侧文字
div{
padding-left:200px;
}
我们可以修改上面的padding实现图片和文字之间有间距。
4.padding的小技巧
(1) 三道杠
.threebar{
display:inline-block;
width:60px;
height:10px;
padding:10px 0;
border-top:10px solid;
border-bottom:10px solid;
background:#000;
background-clip:content-box;
}
(2) 移动端自适应的1:1头图
.header-img{
padding:50%;
background:url(...);
background-size:100%;
}
(3) 分割线
<span class='line'></span>
.line{
padding:16px 6px 2px;
margin-left:12px;
font-size:0;
border-left:solid 2px;
}
(4) 按钮的兼容性
button标签在不同浏览器中有很大的兼容性差异，所以我们可以用label来替代button，例如：
<button id='btn'></button>
<label>提交</label>
label{
display:inline-block;
padding:10px 20px;
}
button{
position:absolute;
z-index: -1;
}
