modern-normalize
modern-normalize copied to clipboard
heading and paragraph margin top
Would it be worth setting all h1 and p etc. tags to have 0 margin on the top?
By default Chrome sets "margin-block-start: 0.67em;" on to heading elements and "margin-block-start: 1em;" on to p.
I find it pretty useless as the margin top collapses away if the element is preceded by another heading or paragraph element. But also the first heading or paragraph that you add to any container that has padding ends up too far away from the top.
For context, the popular (yet older) "normalize.css" does not get rid of the margin top, but Bootstrap's "reboot" does get rid of it.
Personally I prefer it closer to default browser CSS. And this isn't really normalization, or need it as far as I know. Some kind of block spacing is of course usual in most projects, but I would say it is context based and would become quite opinionated.
On a side note, sanitize.css and Remedy CSS sets block margin for h1
for consistent block margins for differing element nesting:
https://github.com/csstools/sanitize.css/blob/main/sanitize.css#L65 https://github.com/jensimmons/cssremedy/blob/master/css/remedy.css#L85