If I have a HTML element <header>
and apply some margins to this HTML5 element through CSS as:
header{
margin:10px 0;
}
The <header>
element is not spaced 10 px from rest of the elements. But if I modify my CSS rule like below:
header{
margin:10px 0;
display:block;
}
then the <header>
element is spaced accordingly.
So, my question here is that do I need to manually set display:block;
in order to set margins/paddings to HTML5 elements, like <header>
?
PS: to clarify, this is not part of the production code/live website. I'm just experimenting with HTML5 tags. :)
The spec seems to list header
as a block level element, http://www.whatwg.org/specs/web-apps/2007-10-26/multipage/section-documents0.html#block-level0
But since HTML5 is not finalized yet, it's understandable that user agent vendors don't automatically make them block-level. So you should just make a rule setting those html 5 elements defined as block by the spec to be display:block;
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With