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

overflow: hidden causes the container element to establish a block formatting context, which blocks parent-child margin collapse (though not other forms of margin collapse). This effect is mentioned explicitly in the section on collapsing margins:

• 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.

As a result, the margins of the p element do not bleed out of the content box of its parent.

You would delete, or zero out, the margins if you absolutely do not want any margins surrounding the p element. Blocking margin collapse between the p element and its parent does not remove the margins from either element.