html 距离上边缘,HTML - CSS边缘恐怖; 边距在父元素之外添加空格

我的css边距不符合我想要或期望的方式。 我好像我的标题margin-top会影响它周围的div-tags。

这就是我想要和期望的：

......但这就是我最终的结果：

资源：

Margin test

body {

margin:0;

}

#page {

margin:0;

background:#FF9;

}

#page_container {

margin:0 20px;

}

h1 {

margin:50px 0 0 0;

}

Title

Description

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

我想这跟我的其他问题类似; 为什么这种CSS margin-top风格不起作用？ 问题是我该如何解决这个具体问题？

我已经阅读了类似问题的几个主题，但没有找到任何真正的答案和解决方案。 我知道添加padding:1px;或border:1px;解决了这个问题。 但这只会增加新的问题，因为我不希望在div标签上有填充或边框。

必须有更好的最佳实践解决方案吗？ 这一定很常见。