1

http://christianselig.com/wp

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

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

4

4 回答 4

1

保证金折叠

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

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

  • 兄弟元素（顶部和底部）之间的边距将折叠到较大边距的大小。
  • 如果没有填充或边框，祖先/后代元素之间相同方向（顶部和底部）的边距将折叠到较大边距的大小
于 2012-11-30T04:46:25.917 回答
1

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

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

结果是

在此处输入图像描述

于 2012-11-30T04:48:03.903 回答
0

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

添加这个：

#masthead {
    overflow: hidden;
}

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

于 2012-11-30T04:48:02.797 回答
0

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

#masthead { overflow:hidden; }

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

于 2012-11-30T04:51:43.773 回答