为什么 <p> 和 <h1> 元素会导致我的布局出现空白？答案

【问题标题】：Why do the <p> and <h1> elements cause gaps in my layout?为什么 <p> 和 <h1> 元素会导致我的布局出现空白？
【发布时间】：2009-06-15 15:13:59
【问题描述】：

如果我有以下html：

<body>
    <div id="mainTop">
    </div>
    <div id="main">
        <h2>
            <%= Html.Encode(ViewData["Message"]) %></h2>
        <p>
            To learn more about ASP.NET MVC visit 
                http://asp.net/mvc</a>.
        </p>
    </div>
    <div id="mainBottom">
    </div>
</body>

使用以下 CSS：

#mainTop
{
    background: url('/Content/Images/bg_top.png') no-repeat;
    width: 963px;   
    height: 65px;
    margin: 0 auto;
    text-align: left;
    color: #5d676d;
}

#main
{
    background: url('/Content/Images/bg_middle.png') repeat-y;
    width: 963px;   
    min-height: 50px;
    margin: 0 auto;
}

#mainBottom
{
    background: url('/Content/Images/bg_bottom2.png') no-repeat;
    width: 963px;   
    height: 128px;
    margin: 0 auto;
}

看起来像这样：

为什么某些标签（如<p> 和标题标签会导致我的布局出现空白？理想情况下，我不希望我的内容之间有那些巨大的空间。

【问题讨论】：

您的 HTML/CSS 还有更多内容吗？我无法使用您的示例代码重现该问题。

标签： html css

【解决方案1】：

默认情况下，<p> 和 <h2>（以及其他）具有关联的边距和填充。尝试将以下内容添加到您的 CSS：

p, h2 {
  margin: 0px;
  padding: 0px;
}

填充不会影响元素的边框和背景，但根据您的需要，您可能想像我在这里一样尝试删除它们。

编辑：正如 Guffa pointed out 在下面的答案中，段落和标题的边距超出其容器 DIV 的原因是由于 collapsing margins.

【讨论】：

@KingNestor：另外...... DIV 默认没有边距（或填充），因此您可以摆脱这些说明。
示例代码表明间隔在div之间，而不是H1/P
嗯，你是对的。最后，我的目标是他的书面问题。关于 DIV，我不熟悉这种“margin: 0 auto”表示法，也许这就是问题所在。 @King 你试过只使用“margin：0px”吗？
由于边距折叠，边距显示在 div 级别。您应该将您的答案与 Guffa 的答案结合起来。
@JoeCool：实际上这些元素上的 margin:0 可以解决问题，因为边距折叠问题。起初我没有注意到这一点，因为我测试了一个带边框的样本，它不会折叠。

【解决方案2】：

为避免此类情况，请使用YUI Reset 之类的内容。它将默认 CSS 设置为跨浏览器可预测的内容。

【讨论】：

【解决方案3】：

那是因为collapsing margins。边距不是围绕单个元素的东西，例如填充。相反，边距决定了元素之间的距离。如果父元素没有边距或内边距（如代码中的 div 元素），则子元素（h2 和 p）的边距决定父元素之间的距离，而不是子元素之间的距离。

现在，当父元素设置了背景时，您通常应该避免折叠边距，因为 IE（至少到版本 7）不能正确处理折叠边距。

如果你只是在你的 div 元素上设置了一些内边距（看起来你应该有那个），边距不会在它们之外折叠。

【讨论】：

【解决方案4】：

问题是因为collapsing margins。 h1 和 p 元素的边距构成主 div 的边距。您可以通过删除这些元素的边距来解决此问题：

h1,p { margin: 0; }

或通过向 div 添加边框或填充：

#main { padding: 1px; }

还要确保您的 HTML 格式正确，您的示例中有一个流浪的 </a>。

【讨论】：

【解决方案5】：

在添加自己的 css 之前，您是否尝试过 css 重置？

【讨论】：

【解决方案6】：

我（通常）使用以下内容开始每个 CSS 文件以避免被自动填充/边距捕获：

*
{
   margin-top: 0;
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
   padding-top: 0;
   padding-right: 0;
   padding-bottom: 0;
   padding-left: 0;
}

为清楚起见进行编辑：

*
{
   margin: 0;
   padding: 0;
}

做同样的事情。

【讨论】：

不“边距：0；填充：0；”照着做？还是有一些浏览器需要枚举？
这只是我的偏好问题。与太多的人一起工作，他们没有意识到这一点，需要把它拼出来才能理解。
这太可怕了。同样，我认为这些人与 CSS 无关。（尽管顺便说一句，我认为 root * 选择器有点 CSS 代码的味道）
annakata - 你指的是我还是那些没有意识到 padding: 0 的人；边距：0；是一样的吗？