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

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