CSS Display

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.

Example

#

This example has three <div> elements. By default, they display as block.  Notice the following:

  1. They appear on separate lines without explicit line breaks (<br />).
  2. They fill the entire horizontal width.

Div element 1
Div element 2
Div element 3
<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>

Display : inline

By adding display:inline these elements show inline behavior. Notice the following:

  1. They appear on the same line until it is entirely filled, and then they wrap.
  2. They only take as much space as their content requires.

Div element 1
Div element 2
Div element 3
<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>

Display : block

Similarly, <span> elements, which are inline by default, can be changed to display as block by adding display:block. Below is an example.

Span element 1 Span element 2 Span element 3
<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>

Display : none

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).


Did you know?

Did you know?

Hiding elements

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.

The Sower by Van Gogh
The Sower by Van Gogh
<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>

Display Values

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.

Block elements

<div> is just one example of a block element in HTML.
Many other elements display in-block by default. Here's the complete list:


Inline elements

<span> is just one example of an inline element in HTML.
Many other elements display inline by default. Here's the complete list:


Did you know?

Did you know?

Transitions do not apply to display property

Applying 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" />

CSS Display Properties

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

You may also like

Guides