HTML5 正文间距问题答案

【问题标题】：HTML5 body spacing issueHTML5 正文间距问题
【发布时间】：2012-12-04 11:48:51
【问题描述】：

在此示例中，我似乎无法删除页面顶部和 <div> 之间的间距：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <style type="text/css">
        html, body{
            padding: 0;
            margin: 0;
        }
        #container{
            background-color: #808080;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="inner-container">
            <h3>Index</h3>
        </div>
    </div>
</body>
</html>

我已将范围缩小到这一行：

<!DOCTYPE html>

似乎删除它会使<div> 与页面顶部对齐。我在 CSS 中看不到实现相同目的的方法。

【问题讨论】：

这可能会有所帮助：Why does the HTML5 DOCTYPE mess with my padding?

标签： css html

【解决方案1】：

也从您的<h3> 中删除边距

h3 { margin-top: 0 }

DEMO

【讨论】：

啊！我一直在查看 Chrome 工具中的 html/body 元素，我不认为 h3 上的边距会导致这种情况...... d'oh！
你是个天才/救星

【解决方案2】：

边距相互折叠。

html (0)、body (0)、#container (0) 和 h3（非 0）的上边距合并为第一个内容和第一个内容之间的组合非零上边距窗口的边缘。

设置h3 { margin-top: 0 } 将其删除。

（尽管您应该以标题 (h1) 而不是子标题 (h3) 开始您的文档。）

【讨论】：

【解决方案3】：

实际上Default Margin Of H1 to H6 是您面临的问题，因此覆盖此值将解决您的问题。

h3 { margin-top: 0;margin-bottom: 0; }

【讨论】：

【解决方案4】：

额外信息：

您可能还想在开始项目之前考虑使用CSS reset script，这样您就不必担心这样的小事。

【讨论】：

我正在使用已经使用 Normalise.css 的 HTML5 Boilerplate，我在示例中排除了它以帮助缩小我的问题。