CSS display Property

The display property sets an element's display behavior.

Common values include block, inline, flex, and grid.

Its value determines how the element participates in the page flow.

Example

#

Two <div> elements with a display value of inline.
They render as a single line.

These two divs display inline and
appear on a single line.
<div style="display: inline">
  These two divs display inline and 
</div>
<div style="display: inline">
  appear on a single line.
</div>

Code Explanation

By default, <div>s are block-level elements that render on a new line.

With display:inline they effectively are converted into <span> elements.


Using display

The display property defines an element's display behavior.

It's a powerful property with a significant role in creating page layout.

This property is also commonly used to show and hide elements.

Note: Do not use display:none to hide secure information (password, credit card, etc.) because the data is still present in the HTML code which can easily be found.

Syntax

display: value

Values

#

Value Description
inline The element displays as an inline element (like <span>). Height and width properties has no effect.
block The element displays as a block element (like <div>). It starts on a new line, and takes up the whole width.
contents The container element disappears. The child elements become children of the element the next level up in the DOM.
flex Displays as a block-level flex container.
grid Displays as a block-level grid container.
inline-block Displays as an inline-level block container. The element itself behaves as an inline element, but height and width values can be applied.
inline-flex Displays as an inline-level flex container.
inline-grid Displays as an inline-level grid container.
inline-table Displays as an inline-level table.
list-item Sets the element to behave like a <li> element.
run-in Displays as either block or inline, depending on the context.
table Sets the element to behave like a <table> element.
table-caption Sets the element to behave like a <caption> element.
table-column-group Sets the element to behave like a <colgroup> element.
table-header-group Sets the element to behave like a <thead> element.
table-footer-group Sets the element to behave like a <tfoot> element.
table-row-group Sets the element to behave like a <tbody> element.
table-cell Sets the element to behave like a <td> element
table-column Sets the element to behave like a <col> element.
table-row Sets the element to behave like a <tr> element.
none Removes, i.e. hides, the element.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different display values.

The first line. display: block The last line.

<style>
  .display-example {
    background-color: lightblue;
    display: block;
  }
</style>

<p>
  The first line.
  <span class="display-example">display: block</span>
  The last line.
</p>

Browser support

This table shows when display support started for each browser.

Chrome
2.0 May 2009
Firefox
1.0 Nov 2004
IE/Edge
5.5 Jul 2000
Opera
9.2 Apr 2007
Safari
1.3 Apr 2005

You may also like

Guides