<h1> 标签上方的无主边距答案

【问题标题】：Ownerless margin above <h1> tag<h1> 标签上方的无主边距
【发布时间】：2011-09-08 20:45:09
【问题描述】：

我有一个<div>，里面有一个<h1> 标签（目前这是唯一的事情。我正在自上而下地构建这个网站）。我在标题上方有一个很大的空间。使用 firebug 向下钻取时，<body> 或<div> 中不包含空格，而是<h1> 标记上方的边距。整个标签、边距和所有内容不应该被父容器包围吗？有什么办法吗？目前该空间完全无法设置样式，不属于任何容器。

例如：

<html style="background:green">
<head>
</head>
<body style="background:blue">
    <div style="background:red">
        <h1 style="background:yellow">Hello world!</h1>
    </div>
</body>
</html>

您可以在显示时清楚地看到<body> 和<div> 都没有围绕该边距。

【问题讨论】：

你能举例说明我们可以研究的问题吗？
这不是<h1>本身吗？标题总是挤满了明显的边距..
@Ben Alpert 添加了一个示例。之前我觉得很清楚，所以我没有打扰。
您所描述的内容应该已经包含在父容器中。你能发布你正在处理的确切问题吗？

标签： html css

【解决方案1】：

你可以试试这个代码，因为 h1 有一个默认边距

h1{margin:0;}

【讨论】：

问题实际上是关于为什么该边距不包含在父容器中。
真的我试图弄清楚，但我没有给出明确的答案，但顺便说一句，如果你为容器设置一个高度并将 h1 设置为位置：绝对边距将添加到容器中真的我不知道这种情况的解释 h1{position:absolute} div.container{height:200px;}

【解决方案2】：

如果您不知从何处遇到了边距和填充问题，您可能想尝试使用CSS Reset。

* { 
    margin: 0; 
    padding: 0;
}

上述重置通常对我有用。

【讨论】：

【解决方案3】：

我发现了一个类似的问题here，并按照链接在这些网站上找到了答案：

基本上，它与折叠边距有关。为了解决这个问题，我不得不在容器中添加一个 1px 的内边距。

【讨论】：

【解决方案4】：

使用 line-height: 0.65em; //倾向于减少或消除这种重叠边距问题。

【讨论】：