CSS: display property

This CSS tutorial explains how to use the CSS property called display with syntax and examples.

Description

The CSS display property defines the type of rendering box to use for an element.

The syntax for the display CSS property is:

display: value;

value

The type of rendering box. It can be one of the following:

Value	Description
none	Turn off display of an element div { display: none; }
inline	Element will generate an inline element box div { display: inline; }
block	Element will generate a block element box div { display: block; }
inline-block	Element will generate a block element box that behaves like an inline box div { display: inline-block; }
list-item	Element will generate a block element box for the content and a separate list-item inline box div { display: list-item; }
table	Element will behave like the HTML <table> element div { display: table; }
table-caption	Element will behave like the HTML <caption> element div { display: table-caption; }
table-column	Element will behave like the HTML <col> element div { display: table-column; }
table-column-group	Element will behave like the HTML <colgroup> element div { display: table-column-group; }
table-header-group	Element will behave like the HTML <thead> element div { display: table-header-group; }
table-row-group	Element will behave like the HTML <tbody> element div { display: table-row-group; }
table-footer-group	Element will behave like the HTML <tfoot> element div { display: table-footer-group; }
table-row	Element will behave like the HTML <tr> element div { display: table-row; }
table-cell	Element will behave like the HTML <td> element div { display: table-cell; }
inherit	Element will inherit the display from its parent element div { display: inherit; }

Block-level elements create vertically distinct blocks of content, with a line-break before and after the content. Block behavior is traditionally displayed by HTML elements such <div>, <p>, <h1>, <h2>, among others.
The CSS display values that create block-level element behavior are: block, list-item, table.
Inline elements do not create vertically distinct blocks of content, but rather create a line box. Inline behavior is traditionally displayed by HTML elements such as <a>, <strong>, <em>, <span>, among others.
The CSS display values that create inline element behavior are: inline, inline-block.
When the CSS display property is set to none, the display of the element is turned off. All child elements also turn off their display.

The CSS display property has basic support with the following browsers:

We will discuss the display property below, exploring examples of how to use this property in CSS.

Let's look at a CSS display example showing how to create a horizontal list using the CSS display property.

li { display: inline; }

In this CSS display example, we have set the <li> tag to display inline, which means that the list items will display as a horizontal list.