具体来说,以下是我读到的帖子的链接：
https://css-tricks.com/almanac/properties/m/margin/
它清楚地解释了崩溃是垂直发生的,并且它是出于某种目的而实现的.但是,它提到“这不会发生在水平边缘(左和右),只有垂直(顶部和底部).”没有解释为什么它不会发生在水平边缘上.
其他地方没有找到答案.
出于好奇,我想知道,为什么不发生水平边缘崩溃？任何帮助赞赏.
解决方法
In CSS,the adjoining margins of two or more Boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse,and the resulting combined margin is called a collapsed margin.
折边率(http://www.w3.org/TR/CSS21/box.html#collapsing-margins)
相邻的框只能是块级框：
Two margins are adjoining if and only if:
- both belong to in-flow block-level Boxes that participate in the same block formatting context
折边率(http://www.w3.org/TR/CSS21/box.html#collapsing-margins)
如果它们没有浮动或绝对定位,则边距只会崩溃：
- Margins between a floated Box and any other Box do not collapse (not even between a float and its in-flow children).
- Margins of elements that establish new block formatting contexts (such as floats and elements with ‘overflow’ other than ‘visible’) do not collapse with their in-flow children.
- Margins of absolutely positioned Boxes do not collapse (not even with their in-flow children).
折边率(http://www.w3.org/TR/CSS21/box.html#collapsing-margins)
这意味着块级框永远不能水平放置在同一条线上(默认情况下块级框将自动在新线上开始)并同时满足边距折叠条件.
从理论上讲,内联框可以满足条件,但由于它们不是块级,因此规则根本不适用于它们.
In an inline formatting context,Boxes are laid out horizontally,one after the other,beginning at the top of a containing block. Horizontal margins,borders,and padding are respected between these Boxes.
内联格式化上下文(http://www.w3.org/TR/CSS21/visuren.html#block-formatting)
也就是说,他们不崩溃的简单原因是W3C这么说：
Horizontal margins never collapse.
