为什么块级元素强制在顶部设置垂直滚动条和空白？
以下代码中的
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上复制，让我更加困惑。
The <h3> in the following code is forcing a vertical scrollbar, which is, in turn, causing a blank space (it's red; i.e. the body) at the top of the page.
Why?
<!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>
Note: This result cannot be replicated on jsfiddle, making me even more confused.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
今天您将学习一些有关 HTML 的新知识。边距合并/折叠/合并。因此，H3 元素上的边距与 body 元素上的边距相结合，并为 body 元素提供边距。
请参阅http://www.w3.org/TR/CSS21/box。 html#collapsing-margins
您可以添加中间元素（填充、边框）来防止这种情况发生，或者删除 H3 元素的边距。
这样做（我相信）是因为这就是原始 P 标签的工作原理。 P 标签的上方和下方有一些空间 - 但如果您一个接一个地有两个 P 标签，您不会获得两倍的空间，而只会获得一次。为了在 HTML 切换到 CSS 时复制这种行为，他们创建了“边距”，并将其组合起来。
So today you learn something new about HTML. Margins combine/collapse/merge. So the margin on the H3 element is combining with the margin on the body element, and giving the body element the margin.
See http://www.w3.org/TR/CSS21/box.html#collapsing-margins
You can add intervening elements (padding, border) to prevent this, or remove the margin from the H3 element.
This was done (I believe) because that's how the original P tag worked. Above and below the P tag was some space - but if you had two P tags one after the other, you did not get twice the space, but rather just once. In order to replicate this behavior when HTML switched to CSS they created 'margin', and made it combine.