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's 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's a example of changing list items as inline.

Here's a list, without style:

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

Here's 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's 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's 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.
JS in Depth
XAH  BUY NOW

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc