极客观点
项目管理
HarmonyOS
我的 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 margin-top 样式不起作用？ .问题是我该如何解决这个具体问题？
我已经阅读 了一些关于类似问题的主题，但没有找到任何真正的答案和解决方案。我知道添加 padding:1px; 或 border:1px; 可以解决问题。但这只会增加新的问题，因为我不想在我的 div 标签上添加填充或边框。
必须有更好的最佳实践解决方案吗？这一定很常见。
原文由 jamietelin 发布，翻译遵循 CC BY-SA 4.0 许可协议
添加
overflow:auto到你的#pagediv。jsFiddle 示例
并在您查看时检查 崩溃的边距。