CODEWITHSUNDEEP
htmlcss
Eng Mohammed Yehia
Eng Mohammed Yehia

Reputation: 116

Why using display:block for block level elements

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

Upvotes: 3

Views: 314

Answers (2)

idmean
idmean

Reputation: 14865

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.

Upvotes: 2

Paul Sasik
Paul Sasik

Reputation: 81429

That's done to help older browsers properly display modern HTML. In the case of ul, li, h1 etc. tags that have been around since HTML 1.0, it's overkill. display: block is usually done so that modern HTML tags, i.e. HTML 5, that are new such as canvas, article etc. can be displayed by older, or non-standards browsers.

Upvotes: 0

Related Questions