水平边距永远不会有机会折叠，因为管理边距折叠的规则意味着它们永远无法满足条件。
在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）*

当你添加任何DOM元素时，它们是从左到右添加的，一个挨着一个，这意味着主布局是水平的。这就是为什么我相信折叠只发生在垂直方向上。
这确保了每次元素在垂直侧几乎相互接触时都有一个“新行”，您可以更改主元素布局，例如，在AngularJS中从：

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

到

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

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

这是Visual格式化模型9.1.2包含块。块框在静态定位时，往往会占用其包含块内的可用水平空间。如果您设置框的宽度，则会添加一个右边距来补偿。