为何为父div添加border后才会包裹子元素的margin？

这个现象是CSS标准的**margin塌陷（Margin Collapsing）**行为：

• 当父元素没有border、padding，且overflow为默认的visible时，子元素的上下margin会和父元素的margin合并。这里父元素默认margin为0，子元素的margin-top:50px就会“溢出”到父元素外部，看起来父元素没包裹这个margin。
• 给父元素加上border后，相当于在父元素边界和子元素margin之间加了一层分隔，直接打破了margin合并的条件。此时子元素的margin被限制在父元素内部，父元素自然就包裹住了这个margin。

无border时的代码示例 #

.parent {
  background-color: red;
  width: 100px;
  /* border: solid 5px black; */
}

.child {
  margin-top: 50px;
  width: 100px;
  height: 100px;
  background-color: green;
}

<html>
  <head></head>
  <body>
    <div class="parent">
      <div class="child"></div>
    </div>
  </body>
</html>

有border时的代码示例 #

.parent {
  background-color: red;
  width: 100px;
  border: solid 5px black;
}

.child {
  margin-top: 50px;
  width: 100px;
  height: 100px;
  background-color: green;
}

<html>
  <head></head>
  <body>
    <div class="parent">
      <div class="child"></div>
    </div>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Adrian