Why horizontal margin doesn't collapse as vertical margin?
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)