CSS margin 的奇怪行为，为什么？
将 HTML 放在
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div style="width:400px;height:200px;background-color:Gray;margin-bottom:10px;"></div>
<div style="width:400px;height:200px;background-color:Green;margin-top:10px;"></div>
</body>
</html>
这两个 DIV 之间的空间下方只有 10 像素。
为什么？ 请解释。
Having the HTML below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div style="width:400px;height:200px;background-color:Gray;margin-bottom:10px;"></div>
<div style="width:400px;height:200px;background-color:Green;margin-top:10px;"></div>
</body>
</html>
the space between those two DIVs is only 10 pixels.
Why? Explain please.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这种行为称为折叠边距。 不添加保证金值，但使用较高的值：
That behavior is called collapsing margins. The margin values are not added but the higher value is used:
这是一个很好的边距折叠的解释。 基本上，根据 CSS 规范，所有相邻的边距似乎都会相互折叠，这违反了所有常识。
Here is a good explanation of margin collapsing. Basically, it seems that all adjacent margins will collapse into each other, per the CSS specification and against all common sense.
如果你想达到想要的效果，你可以使用“padding”代替，边距总是会折叠
if you want to have the desired effect you can use "padding" instead, margins always collapse