CSS 边距折叠
Posted
技术标签:
【中文标题】CSS 边距折叠【英文标题】：CSS Margin Collapsing 【发布时间】：2010-09-11 06:51:12 【问题描述】：所以本质上，当您没有为给定的 div 元素设置任何边距、填充或边框时，边距折叠会发生吗？
【问题讨论】：
【参考方案1】：“折叠边距表示两个或多个框（可能彼此相邻或嵌套）的相邻边距（没有非空内容、填充或边界区域或间隙将它们分开）组合成一个单一的边距。”
来源：Box Model - 8.3.1 Collapsing margins
【讨论】：
【参考方案2】：没有。当您有两个相邻的垂直边距时，使用两者中较大的一个，而忽略另一个。
因此，例如，如果您有两个块显示元素 A，然后是 B，并且 A 的下边距为 3em，而 B 的上边距为 2em，那么它们之间的距离将是 3em。
如果您设置边框或填充，这可以防止发生折叠。在上面的例子中，两个元素之间的距离将是 5em。
如果您不设置任何边距，则不会有任何边距可折叠。它与使用的元素类型没有任何关系 - 它适用于所有元素类型，而不仅仅是 <div> 元素。
阅读the CSS 2.1 specification了解更多详情。
【讨论】：
将支持答案，给出一些更改： 1. 在“3em/2em”示例中，您可能希望使用绝对单位；在这种情况下，2em /可能/大于 3em 2。“如果你设置边框或填充......” - 这仅在某些情况下是正确的，而不是在标准 'A 后接 B' 一个跨度> 3. “如果你不设置任何...”通常适用于 DIV，但默认情况下，边距折叠会影响大多数元素 +1 - 好答案。此外，当元素浮动、绝对定位或内联块时，不会发生边距折叠。更多信息：reference.sitepoint.com/css/collapsingmargins @steve.hanson ...或者有overflow: hidden
这仅在它们彼此跟随时才成立，但不是真的，如果您在一个没有边距（0em）的元素中有一个边距为2em的块元素，那么边距为内部块元素仍然是 0em。因此，它并不总是两者中的较大者。示例：jsfiddle.net/56maenuL以上是关于CSS 边距折叠的主要内容，如果未能解决你的问题，请参考以下文章