Div element 1
Div element 2
Div element 3
The display property specifies how an element participates in the page flow.
Two fundamental behaviors are block (like div), and inline (like span).
It also specifies the layout for child elements, such as, grid and flex.
This example has three <div> elements. By default, they display as block. Notice the following:
<style>
.div-border {
border: 3px solid #302ea3;
margin: 15px;
padding: 15px;
}
</style>
<main>
<div class="div-border">Div element 1</div>
<div class="div-border">Div element 2</div>
<div class="div-border">Div element 3</div>
</main>
By adding display:inline these elements show inline behavior. Notice the following:
<style>
.div-inline {
border: 3px solid #302ea3;
margin: 15px;
padding: 15px;
display: inline;
}
</style>
<main>
<div class="div-inline">Div element 1</div>
<div class="div-inline">Div element 2</div>
<div class="div-inline">Div element 3</div>
</main>
Similarly, <span> elements, which are inline by default, can be changed to display as block
by adding display:block. Below is an example.
<style>
.span-block {
border: 3px solid #302ea3;
margin: 15px;
padding: 15px;
display: block;
}
</style>
<main>
<span class="span-block">Span element 1</span>
<span class="span-block">Span element 2</span>
<span class="span-block">Span element 3</spanv>
</main>
The display:none setting hides elements including the space they occupy.
This is commonly used with JavaScript to show and hide HTML elements (see below).
Two ways to hide elements are: display:none and visibility:hidden.
What are the differences, and which one is best? It depends.
display:none is hidden including the space it occupied, as if it was never there.
visibility:hidden hides the element, but not the space it occupied.
The example below shows what this means. Toggling display:none will cause a
shift in the surrounding elements (the art caption), whereas visibility:hidden does not.
<script>
function display() {
let img = document.getElementById("img1");
if (img.style.display === "none") {
img.style.display = "block";
} else {
img.style.display = "none";
}
}
function visibility() {
let img = document.getElementById("img2");
if (img.style.visibility === "hidden") {
img.style.visibility = "visible";
} else {
img.style.visibility = "hidden";
}
}
</script>
<div style="display:flex">
<div style="flex:1">
<div><button onclick="display()">
Toggle display : none</button>
</div>
<div>
<img src="/img/css/the-sower-sm.jpg"
class="img-fluid" id="img1" />
</div>
The Sower by Van Gogh
</div>
<div style="flex:1">
<div>
<button onclick="visibility()">
Toggle visibility : hidden
</button>
</div>
<div>
<img src="/img/css/the-sower-sm.jpg"
class="img-fluid" id="img2" />
</div>
The Sower by Van Gogh
</div>
</div>
The display property supports many options. Here is is a list.
| Value | Description |
|---|---|
inline |
The element displays as an inline element (like <span>). Height and width properties have 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. |
<div> is just one example of a block element in HTML.
Many other elements display in-block by default. Here's the complete list:
<span> is just one example of an inline element in HTML.
Many other elements display inline by default. Here's the complete list:
display propertyApplying a transition to the display property is not supported.
As an alternative, use opacity to animate the showing and hiding of elements.
An image appearing and disappearing smoothly.
<style>
#art {
opacity: 1;
transition: 1s ease;
}
</style>
<script>
function hide() {
document.getElementById("art").style.opacity = "0";
}
function show() {
document.getElementById("art").style.opacity = "1";
}
</script>
<div>
<button onclick="hide()">Hide Image</button>
<button onclick="show()">Show Image</button>
</div>
<img src="/img/css/church-at-auvers-sm.png" id="art" />
The table below are the properties used for display and visibility.
| Property | Description |
|---|---|
| display | Specifies how an element should be displayed |
| visibility | Specifies whether or not an element should be visible |
