CSS 边距折叠

发布于 2024-07-04 18:39:07 字数 51 浏览 6 评论 0原文

那么,当您没有为给定的 div 元素设置任何边距、填充或边框时,本质上会发生边距折叠吗?

So essentially does margin collapsing occur when you don't set any margin or padding or border to a given div element?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

请叫√我孤独 2024-07-11 18:39:07

不会。当有两个相邻的垂直边距时,将使用两者中较大的一个,而忽略另一个。

因此,举例来说,如果您有两个块显示元素 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.

夏雨凉 2024-07-11 18:39:07

“折叠边距一词是指两个或多个框(可能彼此相邻或嵌套)的相邻边距(没有非空内容、填充或边框区域或间隙将它们分开)组合形成单个边距”

资料来源:盒子模型 - 8.3.1 折叠边距

"the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin."

Source: Box Model - 8.3.1 Collapsing margins

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文