CSS Layout - The display Property
The display property is one of the most important CSS properties for controlling layout.
What is the display Property?
The display property specifies how an element is displayed on a web page.
Every HTML element has a default display value, which is typically either:
blockinline
You can use the display property to change this default behavior.
Block-level Elements
A block-level element always:
- Starts on a new line
- Takes up the full width available (stretching left to right)
Example Block Elements:
<div><h1>to<h6><p><form><header><footer><section>
Inline Elements
An inline element:
- Does not start on a new line
- Takes up only as much width as necessary
Example Inline Elements:
<span><a><img>
CSS Display Property Values
The display property in CSS has a wide range of values that define how elements are rendered on the page.
Common Display Values
| Value | Description |
|---|---|
inline | Displays an element as an inline element |
block | Displays an element as a block element |
contents | Makes the container disappear, promoting its children up in the DOM |
flex | Displays the element as a block-level flex container |
grid | Displays the element as a block-level grid container |
inline-block | Displays as inline-level but allows height and width |
inline-flex | Displays as an inline-level flex container |
inline-grid | Displays as an inline-level grid container |
inline-table | Behaves like an inline <table> |
list-item | Behaves like an <li> element |
run-in | Displays as either block or inline, based on context |
Table Display Values
| Value | Description |
|---|---|
table | Behaves like a <table> |
table-caption | Behaves like a <caption> |
table-column-group | Behaves like a <colgroup> |
table-header-group | Behaves like a <thead> |
table-footer-group | Behaves like a <tfoot> |
table-row-group | Behaves like a <tbody> |
table-cell | Behaves like a <td> |
table-column | Behaves like a <col> |
table-row | Behaves like a <tr> |
Utility Values
| Value | Description |
|---|---|
none | The element is completely removed (hidden) |
initial | Resets the property to its default value |
inherit | Inherits the property value from its parent |
Use the correct
displayvalue to control layout behavior precisely for your elements.
Display Property - display: none; and Overriding Default Values
display: none;
The display: none; property is commonly used with JavaScript to hide elements without deleting or recreating them.
The
<script>element usesdisplay: none;as its default value, which hides it by default.
Example: Showing a Panel with display: none;
<button onclick="document.getElementById('panel').style.display = 'block'">Click to show panel</button>
<div id="panel" style="display: none;">
This is the panel content!
</div>