29/06/2016 CSS 

display property

w3schools.com
THE WORLD'S LARGEST WEB DEVELOPER SITE

☰   

CSS display Property

« Previous Complete CSS Reference Next »

Example
Display <p> elements as inline elements:

p.inline { 
    display: inline; 
}

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The display property specifies the type of box used for an HTML element.

Default value: inline

Inherited: no

Animatable: no. Read about animatable

Version: CSS1

JavaScript syntax: object.style.display="none" Try it

Browser Support
http://www.w3schools.com/cssref/pr_class_display.asp 1/4
29/06/2016 CSS display property

The numbers in the table specify the first browser version that fully supports the property.

Property

display 4.0 8.0 3.0 3.1 7.0

Partial from
5.5

Note: The values "inline­table", "table", "table­caption", "table­cell", "table­column",
"table­column­group", "table­row", and "table­row­group" are not supported in IE7 and
earlier. IE8 requires a !DOCTYPE. IE9 supports the values.

Note: The values "flex" and "inline­flex" requires a prefix to work in Safari. For "flex" use
"display: ­webkit­flex", for "inline­flex" use "display: ­webkit­inline­flex;".

CSS Syntax
display: value;

Property Values

Value Description Play it

inline Default value. Displays an element as an inline element Play it »

(like <span>)

block Displays an element as a block element (like <p>) Play it »

flex Displays an element as an block­level flex container.
New in CSS3

inline­block Displays an element as an inline­level block container.
The inside of this block is formatted as block­level box,
and the element itself is formatted as an inline­level box

inline­flex Displays an element as an inline­level flex container.
New in CSS3

inline­table The element is displayed as an inline­level table  

list­item Let the element behave like a <li> element Play it »

run­in Displays an element as either block or inline, depending  
on context

http://www.w3schools.com/cssref/pr_class_display.asp 2/4
29/06/2016 CSS display property

table Let the element behave like a <table> element

table­caption Let the element behave like a <caption> element

table­column­ Let the element behave like a <colgroup> element
group

table­header­ Let the element behave like a <thead> element
group

table­footer­ Let the element behave like a <tfoot> element
group

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 will not be displayed at all (has no effect on Play it »

layout)

initial Sets this property to its default value. Read about initial Play it »

inherit Inherits this property from its parent element. Read
about inherit

More Examples

Example
A demonstration of how to use the inherit property value:

body { 
    display: inline; 
} 

p { 
    display: inherit; 
}

http://www.w3schools.com/cssref/pr_class_display.asp 3/4
29/06/2016 CSS display property

Try it Yourself »

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 »

Related Pages
CSS tutorial: CSS Display and visibility

HTML DOM reference: display property

« Previous Complete CSS Reference Next »

http://www.w3schools.com/cssref/pr_class_display.asp 4/4