padding
padding 简写属性在一个声明中设置所有内边距属性，盒子以内与content内容之间的距离为内边距。（浏览器中浅绿色部分就是padding）
书写方式
padding属性也有四种写法以及单独使用
/*值的顺序为上 右 下 左内边距*/
padding:10px 5px 15px 20px;
/*上 左右 下*/
padding:10px 5px 15px;
/*上下 左右*/
padding:10px 5px;
/*4 个内边距都是 10px*/
padding:10px;
/*上内边距*/
padding-top:10px;
margin
margin 作用在当前元素边框以外区域，通常用来控制元素和元素之间的间隔。盒子以外的距离为margin（外边距）
注： 允许使用负值
书写方式
margin属性用法也和上面的padding属性一样，多值书写和指定方向
多值书写：
- 一个值：上 右 下 左
- 两个值：上下 和 左右
- 三个值：上 和 左右 和 下
- 四个值：上 和 右 和 下 左
指定方向：
- 上：margin-top
- 下：margin-bottom
- 左：margin-left
- 右：margin-right
好用的auto
margin: 0 auto;
左右两边设置auto，可以让一个元素居中，a = b的距离
margin-left: auto;
只有左边设置auto，可以让一个元素靠右
margin: 0 auto;
只有右边设置auto，可以让一个元素靠左（其实也就没有设置的必要，因为默认情况 就是靠左的）
注意：正常情况下，margin-top:auto; / margin-bottom:auto; 是无效的
margin的问题
- margin传递问题（给子元素添加margin-top，margin-bottom会传递给父元素），如下图所示：
解决方法：
1.给父级的红色盒子加padding，使红、绿两个盒子顶部保持间隙
2.给父级加边框来阻止触发BFC机制（有种弄个栅栏不让子级margin跑出去的感觉）
3.用一个并列同级元素，代替margin距离。
并列同级元素的height = margin-top / margin-bottom
- margin叠加问题（素1加下外边距，元素2加上外边距；两者之间会产生外边距合并，外边距取两者中的最大值；）
解决方法：
把我们想要的margin加起来加在一个元素身上
盒子组成部分
标准盒模型（content-box）：
- 盒子的组成部分：
width + height + padding + border
- 盒子的总宽度：
width(盒子本身的宽度) + padding-left + padding-right + border-left+ border-right
- 盒子的总高度同理：
怪异盒子模型（border-box）:
如果说按照标准来测：420
怪异盒子模型（规字的宽度与高度是总宽度与总高度）；
content:指盒子的宽度与高度
width(总) = 300 : width(content) + padding-left+padding-right + border-left + border-right
300 = width(content)? + 100(padding-left+padding-right) + 20(border-left + border-right)
300-100-20 = 180
300 - 0 - 0 = 300
