CSS 边距折叠
那么,当您没有为给定的 div 元素设置任何边距、填充或边框时,本质上会发生边距折叠吗?
So essentially does margin collapsing occur when you don't set any margin or padding or border to a given div element?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
不会。当有两个相邻的垂直边距时,将使用两者中较大的一个,而忽略另一个。
因此,举例来说,如果您有两个块显示元素 A,其下方是 B,并且 A 的下边距为 3em,而 B 的上边距为 2em,那么它们之间的距离将为 3em 。
如果设置边框或内边距,则可以防止发生折叠。 在上面的示例中,两个元素之间的距离将为 5em。
如果您不设置任何边距,则不会有任何边距可折叠。 它与使用的元素类型没有任何关系 - 它适用于所有元素类型,而不仅仅是
元素。
请阅读CSS 2.1 规范了解更多详细信息。
No. When you have two adjacent vertical margins, the greater of the two is used and the other is ignored.
So, for instance, if you have two block-display elements, A, followed by B beneath it, and A has a bottom-margin of 3em, while B has a top-margin of 2em, then the distance between them will be 3em.
If you set a border or padding, this prevents the collapsing from occurring. In the above example, the distance between the two elements will then be 5em.
If you don't set any margins, then there won't be any margins to collapse. It has nothing whatsoever to do with the element type in use - it is applicable to all element types, not just
<div>
elements.Read the CSS 2.1 specification for more details.
资料来源:盒子模型 - 8.3.1 折叠边距
Source: Box Model - 8.3.1 Collapsing margins