CSS: Display Property

By Xah Lee. Date: 2018-06-26. Last updated: 2024-06-09.

Display Property

CSS display property lets you control layout.

It is one of the most powerful property for layout, but is complex to understand.

Here is the basics.

There are 2 major types of “rendering box” for a HTML element:

block: The element flows from top to bottom, with a gap above it and below it. e.g. h1, div, p, pre.
inline: The element flows from left to right. e.g. span, strong (bold), a (anchor/link)

Example

Here is a example of changing list items as inline.

Here is a list, without style:

one
two
three

<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>

Here is the same list, but each li set to display:inline:

one
two
three

<ul>
<li style="display:inline">one</li>
<li style="display:inline">two</li>
<li style="display:inline">three</li>
</ul>

What is Rendering Box Type?

The details are fairly complex, but basically it's like this.

Each element, has a “rendering box type”. It determines 2 things:

How it is positioned with respect to its neighbor elements. e.g. block level (like a paragraph p), inline (like a bold b word in a sentence.), table (like block but width does not span the window width, it's shrink wrapped to the table's content's width, which is automatically computed by default.), and others.
How its children elements behave. e.g. table, ul (list), their child elements all have special type of rendering box.

Display Property Values

Here is complete list of values for display.

⭐ means it's not widely supported by browsers yet.

display-outside

These controls their layout with respect to neighbor elements.

display: block: Like HTML div
display: inline: Like HTML b. height and width have no effect.
⭐display: run-in: show either as block or inline, depending on the element before and after.

display-legacy

display: inline-block: inline-level block container. height and width works.
display: inline-table: inline-level table
display: inline-flex: inline-level flex container
display: inline-grid: inline-level grid container

display-inside

These controls the layout of their child elements.

⭐display: flow
⭐display: flow-root
display: table: Like HTML table
display: flex: as block-level flex container
display: grid: as block-level grid container
⭐display: ruby
⭐display: subgrid

display-outside and display-inside

⭐display: block flow
⭐display: inline table
⭐display: flex run-in

display-listitem

display: list-item: Like HTML li
⭐display: list-item block
⭐display: list-item inline
⭐display: list-item flow
⭐display: list-item flow-root
⭐display: list-item block flow
⭐display: list-item block flow-root
⭐display: flow list-item block

display-internal

display: table-row-group: Like HTML tbody
display: table-header-group: Like HTML thead
display: table-footer-group: Like HTML tfoot
display: table-row: Like HTML tr
display: table-cell: Like HTML td
display: table-column-group: Like HTML colgroup
display: table-column: Like HTML col
display: table-caption: Like HTML caption element
⭐display: ruby-base
⭐display: ruby-text
⭐display: ruby-base-container
⭐display: ruby-text-container

display-box

display: contents: pretent the tag does not exist, only the inner text.
display: none: as if the element does not exist.

Universal CSS Property Values

display: inherit: take computed value from parent. [see CSS: Computed Style]
display: initial: browser's initial value.
display: unset: same as inherit if the property inherits, else same as initial.