margin用法：
1.margin在元素外围，不会撑大元素的大小。
2.作用:控制元素与元素之间的间距
3.给单一方向添加margin：margin-left / right / top / bottom；
4.margin设置方法：
margin:30px; 四周
margin:10px 30px; 上下 左右
margin:10px 30px 50px 上 左右 下
margin:10px 30px 50px 100px 上右下左
5. margin: 0 auto; 让当前元素在父元素里面左右居中(如果是块级元素必须设置宽度)。
6:margin常出现的bug
a :两个相邻元素上下的margin值不会叠加会按照较大值进行设置。（也就是：margin合并)
b :如果父元素和第一个子元素没有浮动的情况下，给第一个子元素添加margin-top,会错误放在父元素上面。（margin塌陷）
解决margin塌陷方法：
当前元素(父元素里面第一个子元素)与父元素没有设置任何浮动的情况下，设置margin-top后，会错误的把margin-top加在父级元素上，
1、给父级元素添加overflow:hidden;(推荐使用)
2、给父元素或者子元素加浮动
padding用法:
1: padding是在盒子里面，在盒子与内容之间。
2：padding的作用：控制子元素在父元素里面的位置关系。
3：padding会把盒子撑大。
4：如果想让盒子保持原有的大小：在宽高基础上减掉padding值。（ 如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉 ）也可以转为怪异盒模型。
标准盒模型是盒子的总宽度=内容区+内填充区+边框+外边距，它的内容区是不包含内填充区和边框的；
怪异盒模型是盒子的总宽度=内容区{内容，内填充，边框}+外边距,它和标准盒模型相反，它的内容区是包含填充区和边框的；
5:如果给单一方向添加padding：padding-top / bottom / left / right；
6:padding的设置特点：padding:30px; 四周
padding:10px 30px; 上下 左右
padding:10px 30px 50px 上 左右 下
padding:10px 30px 50px 100px 上 右 下 左
7:padding不会对背景图的位置造成影响。
