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

【问题标题】：Why does the padding of one element affect the margin of another?为什么一个元素的填充会影响另一个元素的边距？
【发布时间】：2011-09-25 13:59:36
【问题描述】：

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

如果您查看源代码，CSS 定义<header> 每边应有 135px 的边距，内容每边应有 135px 的边距。为什么内容的间距是原来的两倍？

【问题讨论】：

我不明白/无法复制您所说的“间距加倍”的意思。在我看来，它们都是正确的。
那个设计看起来有点眼熟.. :)
stackoverflow.com/questions/5013683/css-float-and-padding "当你浮动一个元素时，它实际上将它从文档流中取出，所以填充不会对其产生影响。"
@Alastair：我添加了一张图片...@thirtydot：我也是这么想的，但是我很难找到它... :)

标签： html css

【解决方案1】：

在我的屏幕上看起来不错 (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 和“浮动在”通知框下方的内容。通常认为在浮动元素的末尾放置一个清除元素是一种很好的做法，这样可以强制容器展开并“覆盖”所有包含的元素。

【讨论】：

【解决方案2】：

它没有。您在 <header> 中浮动元素而不是清除它们。

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

【讨论】：

谢谢，我会在 3 分钟内接受。不敢相信我错过了：P
有时只需要换一双眼睛。