为什么水平保证金不会作为纵向保证金崩溃？

Question

我理解为什么会发生保证金崩溃.我在各种网站上看到了很少的例子,说明它是如何发生的以及为什么会发生.

具体来说,以下是我读到的帖子的链接:https:
//css-tricks.com/almanac/properties/m/margin/

它清楚地解释了崩溃是垂直发生的,并且它是为了某个目的而实现的.但是,它提到"这不会发生在水平边缘(左和右),只有垂直(顶部和底部)." 没有解释为什么它不会发生在水平边缘上.

其他地方没有找到答案.

出于好奇,我想知道,为什么水平边缘崩溃不会发生？任何帮助赞赏.

Answer 1

水平边距永远不会有崩溃的机会,因为管理边际崩溃的规则意味着他们永远无法满足条件.

在CSS中,两个或多个框(可能是也可能不是兄弟)的相邻边距可以组合形成单个边距.据说以这种方式组合的边距会崩溃,因此产生的合并边距称为折叠边距.

折边率(http://www.w3.org/TR/CSS21/box.html#collapsing-margins)

相邻的框只能是块级框:

当且仅当以下情况时,两个边距相邻:

• 两者都属于参与相同块格式化上下文的流内块级框

折边率(http://www.w3.org/TR/CSS21/box.html#collapsing-margins)

如果它们没有浮动或绝对定位,则边距只会崩溃:

• 浮动框和任何其他框之间的边距不会崩溃(甚至在浮动及其流入子代之间也不会).
• 建立新块格式化上下文的元素的边距(例如浮点数和"溢出"除"可见"之外的元素)不会因其流入的子节点而崩溃.
• 绝对定位的盒子的边缘不会坍塌(甚至没有流入的孩子).

折边率(http://www.w3.org/TR/CSS21/box.html#collapsing-margins)

这意味着块级框永远不能水平放置在同一条线上(默认情况下块级框将自动在新行上开始)并同时满足边距折叠条件.

从理论上讲,内联框可以满足条件,但由于它们不是块级,因此规则根本不适用于它们.

在内联格式化上下文中,框从一个包含块的顶部开始一个接一个地水平排列.这些框之间会考虑水平边距,边框和填充.

内联格式化上下文(http://www.w3.org/TR/CSS21/visuren.html#block-formatting)

也就是说,他们不崩溃的简单原因是W3C这么说:

水平边距永不崩溃.

折边率(http://www.w3.org/TR/CSS21/box.html#collapsing-margins)