Why use a display: block for block-level elements
Sometimes I see designers using display: block
block level elements? For example, I have seen people using display:block
for elements that are already block level elements such as ul, li
type headers h1, h2, h3
, etc.
If browsers already treat these elements as block level elements, why should I use a display block on them?
early
source to share
Most browsers correctly recognize h1
, h2
, ul
(they have always been included in the HTML), but for the new HTML5 elements, such as header
, footer
, and main
, and canvas
this is a good practice. As old browsers didn't recognize them, but if you declared them as an element block
, they will render them correctly.
For example, IE8 does not recognize footer
and display the footer as an inline element (on most sites that can cause clutter). ( http://caniuse.com/#search=footer )
This block of code from normalize.css of a commonly used CSS style sheet to "normalize" the display of elements in 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 indicate why they are applying display: block
.
In some cases, it display: block
can be used to set properties previously changed in CSS. For example, if a plugin wants to make sure its headers are rendered as a block, it sets h1
, h2
... to display: block
, because perhaps the site it belongs to installed h1
to inline
.
source to share
This is to help older browsers render modern HTML correctly. In the case of ul, li, h1, etc. tags that have been around since HTML 1.0, it overflows. display: block
usually done so that modern HTML tags, i.e. HTML 5, newer ones like canvas
, article
etc., can be rendered by older or non-standard browsers.
source to share