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.
Two <div> elements with a display value of inline.
They render as a single line.
<div style="display: inline">
These two divs display inline and
</div>
<div style="display: inline">
appear on a single line.
</div>
By default, <div>s are block-level elements that render on a new line.
With display:inline they effectively are converted into <span> elements.
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.
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.display: value
| 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. |
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>
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 |
