Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Are HTML5 tags are not block level elements?

Tags:

html

css

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. :)

like image 905
Veera Avatar asked Feb 27 '23 13:02

Veera


1 Answers

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;.

like image 106
meder omuraliev Avatar answered Mar 07 '23 16:03

meder omuraliev