HTML/CSS 边距问题
我开发网站已经三年了，今天发现了一些我无法理解的东西。我正在使用的代码： http://pastie.org/1439629
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Page Title</title>
<style type="text/css" media="screen">
.box{
margin:50px 0;
background:red;
border:1px solid black;
}
</style>
</head>
<body>
<div class="box">
Y
</div>
<div class="box">
X
</div>
</body>
现在的问题是，我不明白为什么两个 Div 与该类BOX 共享相同的边距空间。即 Y 的下边距与 X 的上边距相同。两者之间不应该有 100 像素的空间而不是 50 像素吗？
编辑： 如果我编辑CSS，
.box{
margin:50px;
background:red;
border:1px solid black;
float:left;
height:50px;
width:50px;
}
那么两者之间的距离应该仍然是50px，但是不是！现在是100像素。为什么？
很抱歉问了这么一个微不足道的问题，但我无法弄清楚。
I've been developing websites for 3 years now and today found something which I couldn't understand. The code I am working with:
http://pastie.org/1439629
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Page Title</title>
<style type="text/css" media="screen">
.box{
margin:50px 0;
background:red;
border:1px solid black;
}
</style>
</head>
<body>
<div class="box">
Y
</div>
<div class="box">
X
</div>
</body>
Now the issue is, I cant figure out why the two Divs with the class BOX are sharing the same margin space. i.e. the bottom margin on Y is same as top margin of X. Shouldn't there be 100pixel space between the two instead of 50px?
Edit:
If i edit CSS to
.box{
margin:50px;
background:red;
border:1px solid black;
float:left;
height:50px;
width:50px;
}
then the distance between the two should still be 50px, but no! now its 100pixel. Why?
Sorry for such a trivial question but i couldn't figure out.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
该行为是 html 标准的一部分。请参阅： http://www.w3.org/TR/CSS21/box .html#collapsing-margins
That behaviour is part of the html standard. see: http://www.w3.org/TR/CSS21/box.html#collapsing-margins
我认为在 div y 的底部距 50px 边距之后，div x 检查顶部距，它是 50px。那么就不需要再从顶部留出 50 px 的边距了。
i think after 50px margin from bottom for div y , div x check margin top and it is 50px. then no need to margin 50 px from top again.