儿童元素的保证金

Question

  

可能重复：
  Margin on child element moves parent element

我有一个包含子div的父div。 Parent是正文中的第一个元素，没有特定的CSS样式。当我设置

.child {
   margin-top: 10px;
}

最终结果是child的顶部仍然与parent对齐。我的父母向下移动10px而不是child向下移动10px。

我发现向parent添加填充可以起作用，但我读过这不是解决问题的方法。为什么？如果我想要margin-right我可以在padding-right上parent，同样如果我想要margin-top我也可以padding-top并获得正确的结果。

在margin on child element moves parent element有人说：

  

如果你想要一个上边距怎么办？不是真正的解决方案。如果需要最高保证金，这不是真正的解决方案。

他想说什么？请解释一下。

Answer 1

来自Mozilla开发者网络上的CSS Margin Collapsing：

  

父母和第一个/最后一个孩子

     

如果没有边框，填充，内联内容或间隙将块的边缘顶部与其第一个子块[...]的边缘顶部分开，则这些边距会崩溃。折叠的保证金最终在父母之外。