Why do overflow clear margin of p-tag

Question

I just learnt a new \"css hack\" from my teacher. But he don\'t know why it works.
I\'ll explain:

I\'ve on my website a gap (the green line) which I don\'t want

Answer 1

The browser always collapses the margins with the nearby margins. When you give an overflow: hidden, it calculates all the contents inside it's box model and makes it confine to the content.

Explanation for BoltClock and anyone else. Sorry about my quick dirty handwriting...

This is the same case with floats too. Floated items do not occupy any space. Have a look here:

div {padding: 5px; border: 1px solid #666;}

But the same thing, if the parent has an overflow: hidden it doesn't happen:

div {padding: 5px; border: 1px solid #666;}

A whole big article about this concept here: What You Should Know About Collapsing Margins. The overflow is such a powerful property that it works for everything. But when it comes to position you need to use it carefully!

The position works like float, in the way that both do not take the layout. For eg., see the below snippet:

div {padding: 5px; border: 1px solid #666;}

Where, if you play with it in the wrong way:

div {padding: 5px; border: 1px solid #666;}

The contents above get cut. Hope it is clear.