margin(外边距)

1. margin-top：上外边距，设置一个正值，元素会向下移动
2. margin-right：默认情况下设置 margin-right 不会产生任何效果
3. margin-bottom:下外边距，设置一个正直，其他元素会向下移动
4. margin-left:左外边距，设置一个正值，元素会向右移动
5. margin 的值为负数则刚好和正数的效果相反
6. 子元素的 margin,是参考父元素的 content 计算的。（因为是父亲的 content 中承装这子元素）

div {
  width: 100px;
  height: 100px;
  /* 上，右，下，左 */
  margin: 25px 50px 75px 100px;
  /* 上，左右，下 */
  margin: 10px 20px 10px;
  /* 上下 ，左右 */
  margin: 10px 20px;
  /* 全部 */
  margin: 10px;

  /* 盒子水平居中 */
  margin: 0 auto;
  background-color: aqua;
}

垂直外边距合并问题

相邻块元素垂直外边距合并：

相邻块元素垂直外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，并且取两个值中的较大者。 行内元素，浮动，绝对定位外边距不会出现此问题

解决方案：

尽量只给一个盒子添加 margin 值

在这里插入图片描述

嵌套块元素垂直外边距塌陷：

1. 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距的同时子元素也有上外边距，此时元素会塌陷较大的外边距值
2. 子盒子同时设置上，下外边距，也会导致此问题。
   

解决方案

1. 可以为父元素定义上内边距
2. 可以为父元素定义上边框
3. 可以为父元素添加 overflow:hidden