Spacing overflow

Hi hope everything well, I noticed a spacing problem with my webpage I’m working on. I am using HTML 5 which sets new tags such as “article” and “nav” to display as block, but i do not think that is a problem because “divs” are naturally set to display as block. What I’m noticing is the margin on the tags like “p” and “h1” are overflowing from the divs, so to fix this I display them as inline-block, which fixes my spacing issue. Would this method be the most educated choice or would there be another way to deal with this problem? Any input is appreciated, thank!

Heres an example.

A better option is to put something like a 1px padding on the top and bottom of your header, article and footer (just as you would on a div). What you are seeing is called “margin collapse”, and it’s expected behavior.

Thanks for the reply, margin collapse can be a tough cookie. The 1px padding trick worked fine, i also found that using a mixture of margins and overflow carefull will address the issue of my margin collapsing.
Check it out

Another option is to put a 1px border on the container.

Okey i didnt want to do that add first becuase it would ruin a pixel perfect layout, but a simple negative top margin of 1px fixes that.