为什么顶部和底部边距在子容器中消失？

Question

HTML

<div class='parent'>
  <div class='child'>
    Hi
  </div>
</div>

CSS

.parent {
  background-color: #e5e5e5;
}

.child {
  background-color: #999999;
  margin: 20px;
}

当渲染时，子div上的上边距和下边距丢失。 将以下样式应用于.parent类后，边距重新出现。这是为什么？

.parent {
  margin: -1px;
  padding: 1px;
}

https://jsfiddle.net/trxek0kc/2/

Answer 1

在某些情况下，顶部和底部边距会折叠。您可以阅读更多相关信息Font Awesome Website。发生了什么：

  

如果没有边框，填充，内联零件，块格式化上下文创建或清除以将块的边距顶部与其第一个子块的边缘顶部分开，那么这些边距会崩溃。折叠的保证金最终在父母之外。

Answer 2

嘿如果我理解正确，你必须向父元素添加填充，而不是给子元素赋予边距。然后你会得到你想要的结果。

.o

或者您可以将添加溢出属性添加到父元素

.parent {
  background-color: #e5e5e5;
  padding: 20px;
}

.child {
  background-color: #999999;

}

Answer 3

它没有丢失，但它适用于身体，

点击此处了解详情：collapsing margins

  

简单来说，这个定义表明当两个元素的垂直边距接触时，只有具有最大边际值的元素的边缘将被尊重，