为什么块级元素强制垂直滚动条和顶部的空白空间？答案

【问题标题】：Why are block level elements forcing a vertical scrollbar and blank space at the top?为什么块级元素强制垂直滚动条和顶部的空白空间？
【发布时间】：2011-06-15 05:49:05
【问题描述】：

以下代码中的<h3> 强制垂直滚动条，这反过来又导致页面顶部出现空白（红色；即body）。

为什么？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > 
    <title>Test</title>



<style type="text/css">

html { height: 100%; }



body {
    background-color:#f00;
    margin:0; 
    padding:0;
    height:100%;
} 



#divParent1 {
    background-color:#0f0;
    background-image:url("example1_bg.png");
    background-repeat: repeat;
    height:100%;
    margin:0 auto;
    padding:0;
}



#div1 { 
    background-image:url(example1_white_center.png); 
    background-repeat: repeat-y;
    background-position: center;
    width:1200px;
    min-width:1200px;
    _width:1200px;
    height:100%;
    margin:0 auto;
}



#div2{
    background-image:url(example1_dgreen_blank.png); 
    background-repeat: no-repeat;
    height:100%;
    margin:0;
}

</style>

</head>







<body>

<div id="divParent1">
    <div id="div1">
        <div id="div2">
            <div style="width:100%; position:relative; top:240px; margin:0;">
                <div style="margin:0 auto; width:570px; background-color:#00f; ">

<h3>LOLOL</h3>

hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>

                </div>
            </div>
        </div>
    </div>
</div>




</body>
</html>

注意：这个结果不能在 jsfiddle 上复制，让我更加困惑。

【问题讨论】：

标签： html block margin

【解决方案1】：

所以今天你学习了一些关于 HTML 的新知识。边距合并/折叠/合并。所以 H3 元素的边距与 body 元素的边距相结合，给了 body 元素的边距。

见http://www.w3.org/TR/CSS21/box.html#collapsing-margins

您可以添加中间元素（填充、边框）来防止这种情况发生，或者从 H3 元素中删除边距。

这样做（我相信）是因为原来的 P 标签就是这样工作的。 P 标签的上方和下方是一些空间 - 但如果您一个接一个地有两个 P 标签，您不会得到两倍的空间，而是只有一次。为了在 HTML 切换到 CSS 时复制这种行为，他们创建了“边距”，并将其合并。

【讨论】：

是的，删除<h3> 上的边距和填充修复了它。我做了一些修修补补，印象中可能是左/右边距/填充是问题所在，但实际上是顶部。对我来说似乎很奇怪，顶部会导致问题，但左侧、右侧和底部边距似乎没有效果。 W3.org 链接已添加书签。谢谢！