Why using display:block for block level elements

Question

Sometimes I see designers using display: block for block level elements? For instance I saw people using display:block on elements that are already block level elements like ul, li and headers like h1, h2, h3 and so on.

If browsers already treats those elements as block level elements why do I have to use display block on them ?

thanks in advance

Answer 1

Most browsers recognize h1, h2, ul correctely (they were always included in HTML) but for newer HTML5 elements like header, footer and main and canvas it's a good practice. Because older browsers didn't recognize them, but if you did declare them as block element they will display them properly.

For instance IE8 wouldn't recognize footer and would display the footer as inline element (on most sites that would cause a mess). (http://caniuse.com/#search=footer)

This code block is from normalize.css a often used CSS stylesheet to "normalize" the display of elements across browsers:

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

The comments are pointing out why they are applying display: block.

In some cases, display: block may be used to set properties previously changed in CSS. For instance if a plugin wants to make sure its headings are displayed as block, it sets h1, h2... to display: block, because maybe the site it's included in has set h1 to inline.