为什么一个元素的填充会影响另一个元素的边距？

Question

我有这个页面：http://jsfiddle.net/minitech/yU3aj/show/

如果查看源代码，CSS会定义<header>每边应该有135px的边填充，并且每边的内容应该有135px的边距。为什么内容最终会在间距中加倍？

Answer 1

没有。你是<header>中的浮动元素，而不是清除它们。

将clear: both;添加到内容div的样式中，它将移到标题下方和左侧。

Answer 2

在我的屏幕上看起来很好（Firefox 5.0）

虽然我读过一些旧的IE版本有一个名为double margin的问题

还要确保在<header>中的这两个子元素之后放置一个clearfix div：

<header>   
  <div id="notifications" class="left">notifications</div>
  <div class="right">
    <a href="account.aspx" id="userinfo"><span class="dropdown">▾</span> username</a>
  </div>
  <div style="clear: both;"></div>
</header>

编辑：在查看截图后，很明显你错过了清除div和下面的内容“浮动”你的通知框。通常认为将清除元素放在浮动元素的末尾是一种好习惯，这样就可以迫使容器扩展并“覆盖”所有包含的元素。