"Collapsing the upper indentation with the bottom indent of the parent element" What is it?

0 like 0 dislike
5 views
Hi! I read on a website about the collapse of external padding and how to avoid them, but do not understand one thing:
the elements to which you apply the clear property to right, not top and collapses the indentation with the bottom indent of the parent element.

Source: htmlbook
And on habré:
Elements with the property cleared not collapse top margins bottom margins their parents.

Source: habr

How to understand this? Generally the top margin (margin-top) child element can collapse with the bottom margin (margin-bottom) of the parent element? Top child with the bottom parent? What does that mean?

Tell us how it is, if not difficult with html code where there is a collapse.

Or I somehow misunderstood this line?
by | 5 views

2 Answers

0 like 0 dislike
Not a bug, but a feature!

Let's have structrure:
Header\r\rText\r\rSubheader\r\rText


And css:
h1 { margin: 2.5 em 0; } h2 { margin: 1.5 em 0; } p { margin: 1em 0; }


It would seem between paragraph and headings must be indented 2.5 + 1.5 = 4em,
but because of the collapse this is not happening and is indented 2.5 em just as much as you for the title.

It's great, would otherwise have to bother with
h1 { margin: 2.5 em 0; } h1 + h2 { margin-bottom: 1.5 em; } h1 + p { margin-bottom: 1em; }
by
0 like 0 dislike
in short, to explain quite a chore, Google css clearfix and all will understand
by

Related questions

0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
110,608 questions
257,186 answers
0 comments
33,909 users