html - 为什么此页面上的 margin-top 会下推更多，而不仅仅是它所在的 div？

Question

我有一margin-top: 50px组 .greeting 类 div，它基本上是大问候图像。但无论出于何种原因，它会出于某种原因拖下前一个导航元素，即使它们没有附加。

在我的主站点http://christianselig.com上，我有它（没有 Wordpress 实现），所以我很困惑这里有什么不同。

score 1 · Accepted Answer

保证金折叠

如果元素没有上边框、没有上边距且子元素没有间隙，则流入块元素的上边距与其第一个流入块级子元素的上边距一起折叠。

作为一个严重的过度简化：

score 1 · Accepted Answer

习惯了这个 css 清除你的标题id

#masthead.site-header:after {
    clear: both;
    content: "";
    display: block;
    overflow: hidden;
}

结果是

在此处输入图像描述

score 0 · Accepted Answer

正在崩溃，因为它的#masthead所有孩子（在这种情况下只有一个）都是浮动的，因此失去了它的布局属性。

添加这个：

#masthead {
    overflow: hidden;
}

或者，删除规则中的float属性并将其替换为。我不明白为什么这应该是浮动的。.main-navigationoverflow: hidden;

score 0 · Accepted Answer

这是由折叠边距引起的，但这有点不直观，因为您的主要内容的边距正在与其<header>上方的元素折叠。发生这种情况是因为您的标题 ( #masthead) 以零高度结束。要更正此问题，只需添加overflow:hidden到#mastheadheader 元素。

#masthead { overflow:hidden; }

这将导致#masthead 扩展以包含nav它所包含的浮动元素，从而防止页边距折叠到#masthead 标题上。