CSS Display Tutorial with Examples

Overview of CSS display
CSS {display: none}
CSS {display:block}
CSS {display: inline}
CSS {display: inline-block}
CSS {display: grid | inline-grid}
CSS {display: flex}

1. Overview of CSS display

CSS display is used in the following situations:

1 - CSS {display: none}

CSS {display:none} is used to hide an element and release the space that it occupies.

2 - CSS {display: block | inline | inline-block}

Use CSS display with one of the block, inline, inline-block values to make the element treated as a Block element, inline element, or inline-block element.

3 - CSS {display: grid | flex | ... }

Use CSS display with other values (grid, inline-grid, flex, ...) to set the layout for the children of the current element. For example, CSS {display: grid | inline-grid} dividing the surface of the current element into a grid, consisting of many rows and columns, its children will be arranged on these grid cells.

2. CSS {display: none}

CSS {display:none} is used to hide an element and release the space that it occupies. To redisplay this element, use CSS {display:block | inline | inline-block} or remove CSS display.

display-none-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS {display:none}</title>
      <meta charset="UTF-8"/>
      <script>
          function showHideImage(event)  {
             var myImage = document.getElementById("myImage");
             var displayValue = myImage.style.display; 
             if(!displayValue) {
                 myImage.style.display = "none";
             } else {
                 // Remove CSS display.
                 myImage.style.display = null;
                 // OR Set to: block|inline|inline-block.
             }
          }
      </script>
   </head>
   <body>
       <h2>CSS {display:none}</h2>
       <button onClick="showHideImage(event)">Show/Hide Image</button>
       <div style="padding:5px; margin-top:10px; background:#eee;">
           <img src="../images/flower.png" id= "myImage"/>
           Apollo 11 was the spaceflight that landed the first humans,
           Americans Neil Armstrong and Buzz Aldrin,
           on the Moon on July 20, 1969, at 20:18 UTC.
           Armstrong became the first to step onto the lunar
           surface 6 hours later on July 21 at 02:56 UTC.
       </div>
   </body>
</html>

CSS {visibility:hidden} makes an element become invisible, but it doesn't release the space that the element occupies.
CSS visibility

3. CSS {display:block}

Use CSS {display:block} for an element to make it treated as a Block-level element.

Some default elements are a block element, for example <div>, <hr>, ...
Some other elements are by default Inline elements, for example <span>, your can use CSS {display:block} for them to turn it into a block element.

A block element is always displayed as a rectangle. The browser automatically adds line breaks before and after of this element.

Example: Apply CSS {display:block} to the <span> element to turn it into a block element:

display-block-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS {display:block}</title>
      <meta charset="UTF-8"/>
      <script>
          function setDisplayBlock()  {
             var mySpan = document.getElementById("mySpan");
             mySpan.style.display = "block";
          }
          // Use default display.
          function removeDisplay()  {
             var mySpan = document.getElementById("mySpan");
             mySpan.style.display = null;
          }
      </script>
   </head>
   <body>
       <h2>CSS {display:block}</h2>
       <button onClick="setDisplayBlock()">Set {display:block}</button>
       <button onClick="removeDisplay()">Remove display property</button>
       <div style="padding:5px; margin-top:10px; background:#eee;">
           <img src="../images/flower.png" id= "myImage"/>

           <span id="mySpan" style="background:yellow">Apollo 11</span> was the
           spaceflight that landed the first humans,
           Americans Neil Armstrong and Buzz Aldrin,
           on the Moon on July 20, 1969, at 20:18 UTC.
           Armstrong became the first to step onto the lunar
           surface 6 hours later on July 21 at 02:56 UTC.
       </div>
   </body>
</html>

4. CSS {display: inline}

Use CSS {display:inline} for an element to make it treated as a Inline element.

Some elements are by default inline elements, for example, <span>, <strong>, ...
Some other elements are by default block elements, for example, <div>, for which you can use CSS {display:inline} to turn them into inline elements.

An inline element, in many cases, are not a rectangle. It may lie on multiple lines.

Apollo 11 was the spaceflight that landed the first humans,
Americans Neil Armstrong and Buzz Aldrin,
on the Moon on July 20, 1969, at 20:18 UTC.

Armstrong
<span style="background:yellow;">
  became the first to step onto the lunar
   surface 6 hours later on July 21 at 02:56 UTC.
</span>

Example, apply CSS {display:inline} to a <div> element to turn it into an inline element.

display-inline-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS {display:inline}</title>
      <meta charset="UTF-8"/>
      <script>
          function setDisplayInline()  {
             var myDiv = document.getElementById("myDiv");
             myDiv.style.display = "inline";
          }
          // Use default display.
          function removeDisplay()  {
             var myDiv = document.getElementById("myDiv");
             myDiv.style.display = null;
          }
      </script>
   </head>
   <body>
       <h2>CSS {display:inline}</h2>
       <button onClick="setDisplayInline()">Set {display:inline}</button>
       <button onClick="removeDisplay()">Remove display property</button>
       <div style="padding:5px; margin-top:10px; background:#eee;">
           <img src="../images/flower.png" />
           <div id="myDiv" style="background:yellow">
             Apollo 11 was the spaceflight that landed the first humans,
             Americans Neil Armstrong and Buzz Aldrin,
             on the Moon on July 20, 1969, at 20:18 UTC.
           </div>
           Armstrong became the first to step onto the lunar
           surface 6 hours later on July 21 at 02:56 UTC.
       </div>
   </body>
</html>

5. CSS {display: inline-block}

Use CSS {display:inline-block} for element to make it treated as an Inline-block element.

"Inline-block element" is a rectangle. The browser will not automatically add line breaks before and after this element, which makes inline-block elements possible on the same line.

display-inline-block-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS {display:inline-block}</title>
      <meta charset="UTF-8"/>
      <style>
          div {
            background: yellow;
            padding: 5px;
            margin: 5px;
          }
      </style>
   </head>
   <body>
       <h2>CSS {display:inline-block}</h2>
       <div style="display:inline-block">
           HTML Tutorial
       </div>
       <div style="display:inline-block">
           CSS Tutorial
       </div>
       <div style="display:inline-block">
           Javascript Tutorial
       </div>
       <div style="display:inline-block">
           Bootstrap Tutorial
       </div> 
       <div style="display:inline-block">
           JQuery Tutorial
       </div>
   </body>
</html>

6. CSS {display: grid | inline-grid}

CSS {display:grid | inline-grid} is applied to an element to divide its surface into a grid, consisting of rows and columns. Its child elements will be arranged on grid cells. It makes it easier to design pages instead of using CSS float or element positioning techniques.

CSS Grid Layout

7. CSS {display: flex}

CSS Flex Layout