CSS利润恐怖; 边距增加了父元素之外的空间

我的CSS边缘不符合我的期望或期望他们的行为。 我似乎像我的标题边缘顶部影响周围的div标签。

这是我想要的和期望的: 我想要的是....

…但是这是我最终的结果: 我得到...

资源:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Margin test</title> <style type="text/css"> body { margin:0; } #page { margin:0; background:#FF9; } #page_container { margin:0 20px; } h1 { margin:50px 0 0 0; } </style> </head> <body> <div id="page"> <div id="page_container"> <header id="branding" role="banner"> <hgroup> <h1 id="site-title"><span><a href="#" title="Title" rel="home">Title</a></span></h1> <h2 id="site-description">Description</h2> </hgroup> </header> </div> </div> 

在这个例子中,我夸大了保证金。 h1-tag的默认浏览器边距稍微小一点,在我的情况下,我使用Twitter Bootstrap,使用Normalizer.css将默认边距设置为10px。 不重要,重点是; 我不能,不应该, 不想改变h1标签上的边距。

我想这跟我的另一个问题很相似。 为什么这个CSS的边缘风格不起作用? 。 问题是我如何解决这个具体问题?

我已经阅读了几个类似的问题,但没有find任何真正的答案和解决scheme。 我知道添加padding:1px;border:1px; 解决了这个问题。 但是这只会增加新的问题,因为我不想在div标签上使用填充或边框。

必须有一个更好的最佳实践解决scheme? 这一定是相当普遍的。

overflow:auto添加到您的#page div。

jsFiddle的例子

当你在这个时候检查崩溃的边缘 。

这是由于collapsing margins造成的。 在这里看到关于这种行为的文章。

根据这篇文章:

W3C规范定义了折叠边界如下:

“在本规范中,expression式的折叠边距意味着两个或更多个盒子(可以彼此相邻或嵌套)的相邻边界(没有非空内容,填充或边界区域或清除它们)单一保证金“。

亲子元素也是如此。

所有的答案都包括一个可能的解决scheme:

还有其他一些元素没有边缘折叠的情况:

  • 漂浮的元素
  • 绝对定位的元素
  • 内联块元素
  • 溢出的元素设置为除了可见之外的任何东西(它们不会折叠与他们的孩子的边距)。
  • 清除的元素(它们不会用其父块的底部边距折叠它们的顶部边距。)
  • 根元素

问题是家长没有考虑到身高的儿童。 添加display:inline-block; 为我做了。

完整的CSS

 #page { margin:0; background:#FF9; display:inline-block; width:100%; } 

看小提琴