Question

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

具体而言，以下是我读到的帖子的链接：
https://css-tricks.com/almanac/properties/m/margin/

它清楚地解释了崩溃是垂直发生的，并且为了一个目的而实现了这样。但是，它提到＆＃34;这不会发生在水平边缘（左和右），只有垂直（顶部和底部）。＆＃34; 没有提供任何解释至于为什么它不会发生在水平边缘上。

在其他地方找不到答案。

出于好奇，我想知道，为什么横向保证金崩溃不会发生？任何帮助表示赞赏。

Answer 1

水平边距永远不会有崩溃的机会，因为管理保证金崩溃的规则意味着他们永远无法满足条件。

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

相邻的框只能是块级框：

当且仅当：
时，两个边距相邻

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

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

浮动框和任何其他框之间的边距不会崩溃（甚至浮动及其流入子项之间也不会）。

建立新的块格式化上下文的元素的边距（例如浮点数和溢出＆＃39;除了＆＃39;可见＆＃39;之外的元素）不会因其流入的子节点而崩溃。

绝对定位的盒子的边距不会崩溃（甚至没有流入的孩子）。

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

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

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

那就是说，他们不会崩溃的简单原因是W3C这么说：

水平边距永不崩溃。

Answer 2

当你添加任何dom元素时，它们从左到右添加，一个在另一个旁边，这表明主要布局是水平的，这就是为什么我认为折叠只发生在垂直上。这确保了一条新线＆＃34;每次元素在垂直边上几乎相互接触时，您可以更改主要元素布局，例如在angularjs中：

<div layout="row"></div>

到

<div layout="column"></div>

会将布局更改为垂直布局，因此您添加的每个元素都将从上到下进行处理，边距也是如此，如果您要设置，这将使元素从下到上依次为一对一margin:-20px

Answer 3

这是Visual formatting model 9.1.2 Containing blocks。当静止放置时，块箱倾向于占据其容纳块内可用的水平空间。如果您设置框的宽度，则会添加一个右边距以进行补偿。