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?
Only one type of margin can collapse: Vertical (top and bottom). Margin collapse never applies to horizontal (left and right) margins.
Margin collapsing occurs in three basic cases: Adjacent siblings. The margins of adjacent siblings are collapsed (except when the latter sibling needs to be cleared past floats). No content separating parent and descendants.
Margin collapse occurs when vertically adjacent margins of block-level elements collide to share a general margin space. The size of this shared space is dictated by the larger number margin. You can visualize this as an arm wrestling match, where the larger margin will take over and win.
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With