I love-hate margin-collapse.

I thought I had a decent handle on CSS. I can use flexbox and grid to make some decent and responsive webpages, and I'm at least familiar with most of CSS's more common gotchas

But no.

Even in 2021, with years of improvement in the language and browser compatibility, CSS can still fuck you over

I was adding some margin to a div element, and I noticed that the div element's margin seemed to force it's parent to move down too, as if the margin was applied to the parent as well

It took far too many nearly nonsensical google searches to discover that CSS has a nasty little trick called 'margin collapse'

And in true CSS fashion, the way to fix it is a hacky workaround. In this case, if you add a padding of 1px to the parent, the margin collapse doesn't apply.

Fuck CSS. From its weird implementation to its hundreds of gotchas to its hacky workarounds to said gotchas.

Fuck CSS

Why this happen the div's margin inside a div is overflow i read about it and i guess it margin collapse something like that ...How do i fix it??