A moan, a groan, my life story and how me, a technically minded person just can't seem to fit in with anybody.

CSS/HTML – Margin goes/pushes out container block/div

I recently encountered this issue:

Margin Pushing Out

Where the margin on the H1 tag was overflowing into the container above and pushing down the H1 tag’s container. I couldnt figure out why. Here is an example:

To my logic the green should be flush against the top and a 10px gap between the red and green. After some digging around I found out the reason this is happening is due to the way block formatting works. To fix this just add overflow:hidden; to the H1 tag’s container. Fixed here: