CSS: Display Property

By Xah Lee. Date: . Last updated: .

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 will create a newline, above it and below it. Example: h1, div, p, pre.
inline
The element will flow. Example: span, strong (bold), a (anchor/link)

Simple Example

Here is a example of changing list items as inline.

Here is a list, without style:

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

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

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

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.

CSS: Media Query

CSS Layout

CSS Layers

JavaScript Using Css Layers