Why doesn't the horizontal edge collapse like a vertical edge?

Question

I understand why margin crashes. I have seen several examples on different sites regarding how this happens and why it happens.

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

It clearly explains that coagulation occurs vertically, and it was implemented precisely for this purpose. But he mentioned that "This does not occur in horizontal fields (left and right), only vertically (top and bottom)." It is not explained why this does not occur horizontally in the field.

I did not find the answer yet.

Just out of curiosity, I want to know why the destruction of the horizontal edge does not occur? Any help was appreciated.

Answer 1

Horizontal fields will never get a chance to collapse, because the rules that govern the squeezing of the edges mean that they can never satisfy the conditions.

In CSS, adjacent fields of two or more boxes (which may or may not be siblings) can combine to form a single stock. It is believed that the fields that are combined in this way are collapsing, and the resulting combined stock is called a compensated stock.

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

Attaching fields can only be block:

Two fields are adjacent if and only if:

• both refer to block blocks in a stream that participate in the same block formatting context.

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

And the fields only collapse if they are not placed or absolutely not placed:

• Fields between a floating field and any other field are not collapsed (even between a float and child streams).
• Fields of elements that create new block formatting contexts (such as float and elements with "overflow" except for "visible") are not collapsed with their children in the stream.
• The fields of absolutely placed boxes do not collapse (even with their children in the stream).

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

This means that the blocks of the block level can never be located on the same line horizontally (since the blocks by default will automatically start on a new line by default) and at the same time fulfill the conditions of compression of the edges.

Theoretically, inline fields can satisfy conditions, but since they are not block-based, rules do not apply to them at all.

In the context of formatting formatting, fields are laid out horizontally, one after another, starting from the top of the containing block. Horizontal fields, borders, and padding are respected between these fields.

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

However, the simple reason they don’t collapse is because the W3C said this:

Horizontal fields are never destroyed.

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

Answer 2

when you add some dom element, they are added from left to right, one next to each other, which means that the main layout is horizontal, so I believe that the minimization occurs only vertically. this guarantees a "new line" every time the element almost touches each other vertically, you can change the layout of the main element, for example, in angularjs:

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

to

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

which will change the layout vertically, and therefore each added item will be processed from top to bottom, as well as the field, this will make the elements move from top to bottom, if you set margin:-20px

Answer 3

This formatting model 9.1.2 contains blocks . Blocked blocks, when they are statically located, tend to occupy the horizontal space available inside their block. If you set the width of the field, the right field will be added to compensate for it.