内边距与外边距

margin

margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。

• 可以接受1~4个值（上、右、下、左的顺序）
• 可以分别指明四个方向：margin-top、margin-right、margin-bottom、margin-left
• 可取值
  • length：固定值
  • percentage：相对于包含块的宽度，以百分比值为外边距。
  • auto：让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。
• 外边距重叠
  • 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。
  • 父元素与后代元素：父元素没有上边框和padding时，后代元素的margin-top会溢出，溢出后父元素的margin-top会与后代元素取最大值。

---

padding

padding CSS 简写属性控制元素所有四条边的内边距区域。

• 可以接受1~4个值（上、右、下、左的顺序）
• 可以分别指明四个方向：padding-top、padding-right、padding-bottom、padding-left
• 可取值
  • length：固定值
  • percentage：相对于包含块的宽度，以百分比值为内边距。

---

子元素的 margin-top 连带影响父元素的上外边距 解决方法：

1. 父元素加一个边框：border: 1px solid;
2. 父元素加内边距：padding-top: 1px;
3. 父元素加上overflow属性 overflow: hidden;
4. 在父元素前面加一个空内容：

   .div-outer::before {
       content: “”;
       display: table;
   }