Question

我似乎无法删除页面顶部与此示例中<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中看到一种方法来实现同样的目标。

Answer 1

从您的<h3>中删除保证金

h3 { margin-top: 0 }

DEMO

Answer 2

边缘相互坍塌。

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

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

（虽然您应该使用标题（h1）而不是子标题（h3）开始您的文档。）

Answer 3

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

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

Answer 4

额外信息：

你也可能想在开始一个项目之前考虑使用CSS reset script，所以你不必担心这样的小事。

HTML5体间距问题

4 个答案: