CSS边缘折叠 [英] CSS Margin Collapsing

问题描述

解决方案

因此，当您没有为给定的div元素设置任何边距或填充或边框时， p>否。当你有两个相邻的垂直边距时，两个中的较大者被使用，另一个被忽略。

例如，如果你有两个块显示元素， A，其后面是B，并且A具有3em的底部边缘，而B具有2em的顶部边缘，则它们之间的距离将是3em。

如果设置了边框或填充，则可防止折叠发生。在上面的例子中，两个元素之间的距离为5em。

如果不设置任何边距，那么将不会有任何边距折叠。它与所使用的元素类型无关 - 它适用于所有元素类型，而不仅仅是< div> 元素。

阅读 CSS 2.1规范更多详情。

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

解决方案

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.

这篇关于CSS边缘折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！