CSSdisplay Property
Example
Use of some different display values:
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
More "Try it Yourself" examples below.
Definition and Usage
Thedisplay property specifies the display behavior (the type of rendering box) of an element.
| Default value: | inline |
|---|---|
| Inherited: | no |
| Animatable: | no.Read aboutanimatable |
| Version: | CSS1 |
| JavaScript syntax: | object.style.display="none"Try it |
Browser Support
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 |
Note: The values "flex" and "inline-flex" requires the -webkit- prefix to work in Safari, prior version 9.
Note: "display: contents" does not work in Edge prior version 79.
CSS Syntax
Property Values
| Value | Description | Play it |
|---|---|---|
| inline | Displays an element as an inline element (like <span>). Any height and width properties will have no effect. This is default. | Demo ❯ |
| block | Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width | Demo ❯ |
| contents | Makes the container disappear, making the child elements children of the element the next level up in the DOM | Demo ❯ |
| flex | Displays an element as a block-level flex container | Demo ❯ |
| grid | Displays an element as a block-level grid container | Demo ❯ |
| 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 | Demo ❯ |
| inline-flex | Displays an element as an inline-level flex container | Demo ❯ |
| inline-grid | Displays an element as an inline-level grid container | Demo ❯ |
| inline-table | The element is displayed as an inline-level table | Demo ❯ |
| list-item | Let the element behave like a <li> element | Demo ❯ |
| run-in | Displays an element as either block or inline, depending on context | Demo ❯ |
| table | Let the element behave like a <table> element | Demo ❯ |
| 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 | Demo ❯ |
| initial | Sets this property to its default value.Read aboutinitial | |
| inherit | Inherits this property from its parent element.Read aboutinherit |
More Examples
Example
A demonstration of how to use the contents property value. In the following example the .a container will disappear, and making the child elements (.b) children of the element the next level up in the DOM:
display: contents;
border: 2px solid red;
background-color: #ccc;
padding: 10px;
width: 200px;
}
.b {
border: 2px solid blue;
background-color: lightblue;
padding: 10px;
}
Example
A demonstration of how to use the inherit property value:
display: inline;
}
p {
display: inherit;
}
Example
Set the direction of some flexible items inside a <div> element in reverse order:
display: flex;
flex-direction: row-reverse;
}
Related Pages
CSS tutorial:CSS Display and visibility
HTML DOM reference:display property
