How do HTML5 and CSS3 specs decide the display attribute of a div element?

user_2160440 0
Viewed 99

The web (especially frontend) technology evolves so fast that I have to re-learn it literally every year, this time being a (seemingly) ridiculously easy question：why does div has display: block?

Traditionally we have block and inline level elements, defined directly in HTML 4, but HTML5 replaced that with concepts like flow content and phrasing content, which according to MDN leaves this presentational characteristic to CSS. This makes perfect sense following the principle of separation of concerns.

But what does CSS3 say on div? The display module spec primarily discusses the box layout, where the default/initial value for display is inline. It also references CSS2 occasionally for flow layout. Unfortunately CSS2 (including CSS2.2) seems using the term "block-level elements" directly, as if they are already defined somewhere else.

Besides, there are concepts like block formatting context, block boxes, etc. But I feel they are not directly related to the determination of display value for div.

At the end of the day, I just don't how rendering of div works in latest HTML/CSS specs.

css
1 Answers

The default styling for the elements is described in the Rendering section of the HTML5 specification.

Browsers are not required for conformance to follow the rules described there but in most cases they do. For elements as well established as divs, it would make no sense not to follow them.

div elements belong to a flow content set that are set as display:block

address, blockquote, center, dialog, div, figure, figcaption, footer, form, 
header, hr, legend, listing, main, p, plaintext, pre, xmp {
    display: block;
}

It's worth noting that several of these elements are obsolete - center, listing, plaintext and xmp. They should not be used by authors but their rendering is still defined so that old web documents will still render correctly.

Alohci_425850
Related