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!
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