html图片垂直边距,html – 为什么水平边距不会像垂直边距那样崩溃？

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

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.

相邻的框只能是块级框：

Two margins are adjoining if and only if:

both belong to in-flow block-level boxes that participate in the same block formatting context

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

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).

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

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

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.

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

Horizontal margins never collapse.