CSS display Property

Use of some different display values:

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}

Try it Yourself »

More “Try it Yourself” examples below.


Definition and Usage

The display property specifies the display behavior of an element.

Note: Every element on a web page is a rectangular box. The CSS display property determines how that rectangular box behaves.

Default value: inline
Inherited: no
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.display=”none” Try it
CSS Syntax
display: value;
Property Values
Value Description
inline Default value. Displays an element as an inline element (like <span>). Any height and width properties will have no effect
block Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width
flex Displays an element as a block-level flex container
inline-block Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
inline-flex Displays an element as an inline-level flex container
inline-table The element is displayed as an inline-level table
list-item Let the element behave like a <li> element
run-in Displays an element as either block or inline, depending on context
table Let the element behave like a <table> element
table-caption Let the element behave like a <caption> element
table-column-group Let the element behave like a <colgroup> element
table-header-group Let the element behave like a <thead> element
table-footer-group Let the element behave like a <tfoot> element
table-row-group Let the element behave like a <tbody> element
table-cell Let the element behave like a <td> element
table-column Let the element behave like a <col> element
table-row Let the element behave like a <tr> element
none The element is completely removed
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Test All above values

Example

Set the direction of some flexible items inside a <div> element in reverse order:

div {
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}

Try it Yourself »