Why the css specification need to have margin collapse on vertical direction .But ,not on horizontal direction.

user_2794108 0
Viewed 146

Why the css specification need to have margin collapse on vertical direction .But ,not on horizontal direction.

I know this collapse for many years and i try to find the reason for this collapse.The specification said like this: enter link description here

In most cases, after collapsing the vertical margins the result is visually more pleasing and closer to what the designer expects. Please consult the examples of margin, padding, and borders for an illustration of collapsed margins.

Does this the true reason or has some other history reason?

css html
1 Answers

Consider this markup

Para 1
<p>
Para 2
<p>
Para 3
</p>
Para 4

From the definition of Paragraph in HTML5, the Para [1-4] texts form exactly four paragraphs with no other content. What's more so the whole constitutes valid content of the body element, just as it did before the invention of CSS.

So the expectation is that it will display as four, evenly spaced, paragraphs. And indeed it does. And always has done.

Now consider Para 1 to Para 2. For there to be a 1em gap between them the first <p> element (which contains "Para 2") must have a top margin of 1em.

Now consider Para 3 to Para 4. For there to be a 1em gap between them the second <p> element (which contains "Para 3") must have a bottom margin of 1em.

So <p> elements must have both a top margin and a bottom margin of 1em.

Now consider Para 2 to Para 3. If the first<p> element (which contains "Para 2") has a bottom margin of 1em and the second <p> element (which contains "Para 3") has a top margin of 1em, and there's no margin collapse, the gap between them will be 2em, not meeting our equally spaced paragraphs requirement.

To make that gap correctly be 1em, the margins must be collapsed.

Alohci_425850
Related