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%; }
看小提琴
