标题的边距推动了div

Question

任何人都可以解释为什么div被推倒了吗？似乎顶部标题边距应该推到div的顶部，而不是浏览器窗口。

围绕div包裹另一个div没有任何区别。

但如果我将 padding-top：1px; 添加到div中，问题就会消失！

one div

fixed with padding

Answer 1

注意：

这是该问题的新答案，因为margin on element moves the whole page down被标记为该问题的重复，但是我不认为被接受的答案解释了为什么为什么，所以在这里是更详细的说明，如果第一个孩子的页边距已折叠，为什么有时您有一个父级元素时会有一个奇怪的无法解释的间隙。

答案：

这是由于Block Formatting Context（也称为here）引起的。基本上，您所看到的是实际利润下降。折叠边距应该有助于将基于文本的元素一起折叠，因此您不会在段落和标题等内容上增加双倍的页边距，但是问题是它会将段落折叠到父项，导致父级有效地采用了段落的空白： / p>

  

父母和第一个/最后一个孩子   如果没有边框，内边距，内联部分，创建的块格式上下文，或者没有用于将块的页边距与第一个子块的页边距分开的间隙；或没有边框，内边距，内联内容，高度，最小高度或最大高度来将块的边距底部与最后一个子项的边距底部分开，则这些边距会崩溃。折叠后的边距最终在父级之外。
       Mastering margin collapsing - MDN

解决您问题的一种方法是在父级上创建一个新的块格式上下文。您可以通过将overflow: auto添加到父级来轻松实现。父元素可能没有设定的高度，因此它不应在视觉上影响文档。要做的就是创建一个新的上下文，该上下文将使第一个孩子的边缘包含在父对象中。

Answer 2

尝试将overflow:auto添加到父元素。

CSS: Margin-top when parent's got no border

您也可以使用overflow:hidden。在父元素上使用overflow属性也将清除内部浮点数，而不需要clear:both。