The display property dictates the presentation of an element within a webpage.
Each HTML element possesses a default display value, determined by its type, typically block or inline.
By altering the display property, you can modify the default presentation behavior of HTML elements.
A block-level element consistently begins on a fresh line and occupies the entire available width, extending to the left and right edges as much as possible.
Examples of elements that behave as block-level:
An inline element doesn’t initiate on a new line and occupies only the width required for its content.
This is an inline <span> element inside a paragraph.
Examples of elements that behave as inline:
The display property encompasses numerous values:
|
Value |
Description |
|
inline |
Renders an element as an inline element. |
|
block |
Renders an element as a block element. |
|
contents |
Makes the container disappear, causing its child elements to become children of the parent element in the DOM. |
|
flex |
Render an element as a block-level flex container |
|
grid |
Render an element as a block-level grid container |
|
inline-block |
Renders an element as an inline-level block container. The element maintains inline formatting but allows height and width values to be applied. |
|
inline-flex |
Render an element as an inline-level flex container |
|
inline-grid |
Render an element as an inline-level grid container |
|
inline-table |
The element is rendered as an inline-level table. |
|
list-item |
Allow the element to function similarly to an <li> element. |
|
run-in |
Renders an element as either block or inline, based on the context. |
|
table |
Enable the element to function similarly to a <table> element. |
|
table-caption |
Allow the element to function similarly to a <caption> element. |
|
table-column-group |
Enable the element to function similarly to a <colgroup> element. |
|
table-header-group |
Allow the element to function similarly to a <thead> element. |
|
table-footer-group |
Enable the element to function similarly to a <tfoot> element. |
|
table-row-group |
Allow the element to function similarly to a <tbody> element. |
|
table-cell |
Allow the element to function similarly to a <td> element. |
|
table-column |
Enable the element to function similarly to a <col> element. |
|
table-row |
Allow the element to function similarly to a <tr> element. |
|
none |
The element is entirely eliminated. |
|
initial |
Resets this property to its default value. |
|
inherit |
This property inherits its value from its parent element. |
display: none; is frequently employed with JavaScript to toggle the visibility of elements without removing or recreating them. Refer to the final example on this page for a demonstration of this technique.
By default, the <script> element utilizes display: none; styling.
As previously stated, each element is assigned a default display value, which can be overridden.
Converting an inline element to a block element, or vice versa, can be advantageous for achieving a desired appearance while adhering to web standards.
A typical scenario involves transforming inline <li> elements into block elements for horizontal menus.
Example
| li { display: inline; } |
| Please note: Altering the display property of an element solely affects its visual presentation, not its inherent type. Thus, an inline element with display: block; cannot contain other block elements within it. |
The following example presents <span> elements as block-level elements.
Example
| span { display: block; } |
The following example exhibits <a> elements as block-level elements.
Example
| a { display: block; } |
Concealing an element is achieved by setting its display property to none. This action hides the element, causing the page to appear as though the element is absent.
Example
| h1.hidden { display: none; } |
visibility:hidden; also hides an element.
Nonetheless, the element will maintain its previous space allocation, persisting in its hidden state while continuing to impact the layout.
Example
| h1.hidden { visibility: hidden; } |
|
Property |
Description |
|
display |
Defines the display behavior of an element. |
|
visibility |
Determines whether an element should be visible or not. |
