当顶部元素的 margin-bottom 为 50px，底部元素的 margin-top 为 50px 时，为什么两个元素仅相距 50 像素？
我需要确保两个元素始终相距 100 像素。我的代码没有错误，但由于某种原因，P 标签上的 margin-bottom 设置为 50 像素，并且其下方的 DIV 上的 margin-top 也设置为 50 像素。
它们之间的距离不是总共 100 像素，而是只有 50 像素。有人能解释一下吗？我的页面上没有任何浮动，因此这不是由于清除问题造成的。所有 html 和 css 均已验证。
最新版本的 Chrome 和 FIrefox 3.6 中会出现这种情况。
这是我的代码的示例：
#content p {
margin-bottom: 50px;
}
#content #posted {
border-top: 1px dotted #ccc;
line-height: 20px;
margin-top: 50px;
}
I need to make sure that two elements always 100 pixels apart. There are no errors with my code, but for some reason the margin-bottom on the the P tag is set to 50 pixels and the margin-top on a DIV below it is also set to 50 pixels.
Instead of being a total of 100px apart, they are only 50. Can someone explain this? I do not have any floats on the page so it's not due to a clearing issue. All html and css has been validated.
This happens in the latest version of Chrome and FIrefox 3.6.
Here's an example of my code:
#content p {
margin-bottom: 50px;
}
#content #posted {
border-top: 1px dotted #ccc;
line-height: 20px;
margin-top: 50px;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
边距相互重叠。元素的最大边距将是两个元素之间的边距。
如果这不是 IE 中发生的情况，那就是 IE 错误，因为这就是 CSS 的设计工作方式。
您可以使用 padding 来代替，或者只是确保两个元素的边距都是 100px。
Margins overlap on top of each other. The maximum margin of the elements will be the margin between two elements.
If this is not what's happening in IE, it's an IE bug, as this is how CSS was designed to work.
You could use padding instead, or just make sure the margin of both elements is 100px.
边距不会像那样堆叠。底部元素仅设置距离顶部元素 50 像素的边距，不是顶部元素的边距。因此，您需要将边距设置为 100px。
Margins do not stack like that. The bottom element only sets a 50px margin from the top element, not the top element's margin. Therefore you need to make the margins 100px.