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

Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
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 | 8 views

2 Answers

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

Let's have structrure:

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; }
0 like 0 dislike
in short, to explain quite a chore, Google css clearfix and all will understand

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
35,647 users