CSS: Display Property

By Xah Lee. Date: . Last updated: .

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:

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


Here is a example of changing list items as inline.

Here is a list, without style:


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

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

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:

Display Property Values

Here is complete list of values for display.

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


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: 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


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: 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: 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: 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.

CSS, Media Query

CSS, Layout

CSS, Layers

JavaScript Using CSS Layers