为什么这个页面上的margin-top压低了它不仅仅是它的div？

Question

http://christianselig.com/wp

我有一个margin-top: 50px设置为.greeting类div，这基本上是一个很大的问候形象。但无论出于何种原因，由于某些原因，它会拖拽以前的导航元素，即使它们没有附加。

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

Answer 1

Margin Collapse

  

如果元素没有顶部边框，没有顶部填充，并且孩子没有间隙，则流入块元素的上边距会与其第一个流入块级子元素的上边距折叠。

粗略过度简化：

• 兄弟元素（顶部和底部）之间的边距将会折叠到较大边距的大小。
• 如果没有填充或边框
，祖先/后代元素之间相同方向（顶部和底部）的边距将折叠为较大边距的大小

Answer 2

用于此css 清除标题id

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

结果是

Answer 3

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

添加：

#masthead {
    overflow: hidden;
}

---

或者，移除float规则中的.main-navigation媒体资源，然后将其替换为overflow: hidden;。我不明白为什么这应该是漂浮的原因。

Answer 4

这是由边距折叠引起的，但它有些不直观，因为主要内容的边距会与其上方的<header>元素折叠。这是因为您的标题（#masthead）以零高度结束。要更正此问题，只需将overflow:hidden添加到#masthead标题元素。

#masthead { overflow:hidden; }

这将导致#masthead扩展以包含它包含的浮动nav元素，这反过来将阻止边距折叠到#masthead标头。