Use of some different display values:
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
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 |
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;
}
