为什么水平边距不会像垂直边距一样折叠？

Question

I understand why margin collapsing happens; I have seen a few examples on various sites as to how it happens and why it happens.

To be specific, the below is the link to the post I read:
https://css-tricks.com/almanac/properties/m/margin/

It's clearly explained that the collapsing happens vertically and it was implemented like that for a purpose. But, it's mentioned that

This does not happen on horizontal margins (left and right), only vertical (top and bottom).

No explanation has been provided as to why it doesn't happen on horizontal margins.

Why doesn't horizontal margin collapsing occur?

Answer 1

Horizontal margins never get the chance to collapse as the rules that govern margin collapsing mean that they can never satisfy the conditions.

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.

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

Adjoining boxes can only be block-level boxes:

Two margins are adjoining if and only if:

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

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

And margins only collapse if they are not floated or positioned absolutely:

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

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

This means that block-level boxes can never be positioned on the same line horizontally (as block-level boxes will automatically start on a new line by default) and satisfy the margin collapsing conditions at the same time.

In theory, inline boxes could satisfy the conditions but as they are not block-level the rules do not apply to them at all.

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.

Inline formatting contexts ( http://www.w3.org/TR/CSS21/visuren.html#block-formatting )

That said, the simple reason why they don't collapse is that W3C said so:

Horizontal margins never collapse.

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

Answer 2

when you add any dom element, they are been added from left to right, one next to the other, which meen that the main layout is horizontally, this is why I believe collapsing happens only on vertical. this ensure a "new line" each time the element almost touch each other in the vertical sides, you can change the main element layout for example in angularjs from:

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

to

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

which will change the layout to vertically and so each element that you add will be treated from top to bottom and so is the margin, this will make the elements go one on top of each other from bottom to top if you will set margin:-20px

Answer 3

It's the Visual formatting model 9.1.2 Containing blocks . Block boxes, when positioned statically, tend to occupy the horizontal space available inside their containing block. If you set the width of the box, it will be added a right margin to compensate.