1.【margin】外边距
指的是边框外侧到浏览器边缘或则其他元素边框外侧的间距
用于在任何定义的边框之外，为元素周围创建空间。
【margin-top】上外边距
【margin-right】右外边距
【margin-left】左外边距
【margin-bottom】下外边距
【参数值】
【auto】自动
【px】具体的值
【%】包含元素宽度的百分比计的外边距
【inherit】继承父元素的外边距
提示：允许负值。
【margin简写】
一个值时：上下左右
margin:参数1
两个值时; 上下 左右
margin:参数1 参数2
三个值时：上 左右 下
margin:参数1 参数2 参数3
四个值时：上 右 下 左
margin: 参数1 参数2 参数3 参数4
【margin定宽居中】
元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配
margin: 0 auto;
【外边距合并问题】
情况一：2个块元素上下排列时，上下外边距之间的问题
块元素外边距和并上下外边距会发生合并的情况左右外边距不会
如果外边距都是负值 取绝对值大的
解决方案：此时谁的值大就取谁的值
情况二：2个块元素父子关系时，上下外边距之间的问题,子元素设置上外边距时，父元素会跟着子元一起往下跑
解决方案：
-
把父元素或者子元素设置为行内块元素即可
-
给父元素添加
padding:0.1px; box-sizing: border-box;
3．给父元素添加 border: 1px solid red;box-sizing: border-box;就可以解决这个问题，但是使用不方便，不推荐使用。
总结
margin合并
如果是兄弟元素 避免就好了
父子关系 可以给父元素加边框 和 设置 overflow ：hidden
注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
2.【padding】内边距（填充）
指的是边框到内容区域的间距
用于在任何定义的边界内的元素内容周围生成空间。
【padding-top】上内边距
【padding-right】右内边距
【padding-bottom】下内边距
【padding-left】左内边距
【参数值】
【px】具体的值
【%】包含元素宽度的百分比计的外边距
【inherit】继承父元素的外边距
提示：不允许负值。
【padding简写】
一个值时：上下左右
padding:参数1
两个值时; 上下 左右
padding:参数1 参数2
三个值时：上 左右 下
padding:参数1 参数2 参数3
四个值时： 上 右 下 左
padding: 参数1 参数2 参数3 参数4
【内边距填充内容区域问题】
内容区域是元素（盒模型）的内边距、边框和外边距内的部分。
因此，如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。这是不希望出现的结果。
解决方案：使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。
