CSS display

The CSS display property is used to define, how an element should rendered on the web page. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      ul.a li{display: block;}
      ul.b li{display: inline;}
   </style>
</head>
<body>

   <h2>display: block</h2>
   <ul class="a">
      <li>CSS</li>
      <li>HTML</li>
      <li>JavaScript</li>
   </ul>
   
   <h2>display: inline</h2>
   <ul class="b">
      <li>CSS</li>
      <li>HTML</li>
      <li>JavaScript</li>
   </ul>
   
</body>
</html>

Output

display: block

CSS
HTML
JavaScript

display: inline

CSS
HTML
JavaScript

CSS display Syntax

The syntax of display property in CSS, is:

display: x;

The value of x should be any of the following:

inline - Creates an inline-level container where each items displayed in a line like SPAN. The height and width properties does not allowed or we can say that these properties have no effect on inline-level container
block - Creates a block-level conatiner. The block-level container/element behaves like P element. That is, a block-level element starts with a new line and acquire the whole width of that line.
contents - Makes an element disappear. Therefore the child elements of disappeared element will become the child of disappeared element's parent element
flex - Makes an element as block-level flex container
grid - Makes an element as bock-level grid container
inline-block - Makes an element as an inline-level block container
inline-flex - Makes an element as an inline-level flex container
inline-grid - Makes an element as an inline-level grid container
table - Makes an element behaves like TABLE
inline-table - Makes an element behaves like TABLE display inline
table-row - Makes an element behaves like TR
table-cell - Makes an element behaves like TD
table-column - Makes an element behaves like COL
table-caption - Makes an element behaves like CAPTION
table-column-group - Makes an element behaves like colgroup
table-row-group - Makes an element behaves like tbody
table-header-group - Makes an element behaves like thead
table-footer-group - Makes an element behaves like tfoot
list-item - Makes an element behaves like LI
run-in - Makes an element as a block-level or an inline-level container, depending on the context
none - Hides an element
initial - Used to use the default value
inherit - Used to use the value inherited by the parent element

CSS display: inline Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      ul.fresherearth li{display: inline;}
      a{text-decoration: none; background-color: green;
         color: white; padding: 12px;}
   </style>
</head>
<body>
   
   <h2>Without display: inline</h2>
   <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
   </ul>

   <h2>With display: inline</h2>
   <ul class="fresherearth">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
   </ul>

</body>
</html>

Output

Without display: inline

With display: inline

CSS display: block Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .fresherearth{display: block; color: red;}
   </style>
</head>
<body>
   
   <h2>Without display: block</h2>
   <p>Lorem ipsum dolor sit amet fresherearth consectetur adipisicing elit.</p>

   <h2>With display: block</h2>
   <p>Lorem ipsum dolor sit amet <span class="fresherearth">fresherearth</span> consectetur
      adipisicing elit.</p>

</body>
</html>

Output

Without display: block

Lorem ipsum dolor sit amet fresherearth consectetur adipisicing elit.

With display: block

Lorem ipsum dolor sit amet fresherearth consectetur adipisicing elit.

Since display: block makes an element behaves like a P element. Therefore, the SPAN element whose class name is fresherearth starts from a new line and acquired the whole width.

Note - The description of inline Vs block is described in its separate tutorial.

CSS display: contents Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .inner{display: contents;}
      .outer, .out{display: flex;}
   </style>
</head>
<body>

   <h2>Without display: contents</h2>
   <div class="outer">
      <div>
         <div>A</div>
         <div>B</div>
         <div>C</div>
      </div>
   </div>

   <h2>display: contents</h2>
   <div class="outer">
      <div class="inner">
         <div>A</div>
         <div>B</div>
         <div>C</div>
      </div>
   </div>

   <h2>Again Without display: contents</h2>
   <div class="out">
      <div class="in">
         <div>A</div>
         <div>B</div>
         <div>C</div>
      </div>
   </div>
   
</body>
</html>

Output

Without display: contents

display: contents

Again Without display: contents

If you notice in above example, then you will find that all the three DIVs inside the DIV whose class name is inner will become all children to the parent DIV of DIV whose class name is inner.

CSS display: flex Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .fresherearth{display: flex;}
   </style>
</head>
<body>

   <h2>Without display: flex</h2>
   <div>
      <div>A</div>
      <div>B</div>
      <div>C</div>
   </div>

   <h2>With display: flex</h2>
   <div class="fresherearth">
      <div>A</div>
      <div>B</div>
      <div>C</div>
   </div>
   
</body>
</html>

Output

Without display: flex

With display: flex

CSS display: grid Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {display: grid; gap: 2px; color: whitesmoke;
         grid-template-areas: 'head head head head' 'nav main main oth' 'foot foot foot foot';}
      .container > div {background-color: green; padding: 10px; text-align: center;}
      #header {grid-area: head;}
      #menu {grid-area: nav;}
      #content {grid-area: main; min-height: 70vh;}
      #other {grid-area: oth;}
      #footer {grid-area: foot;}
   </style>
</head>
<body>

   <div class="container">
      <div id="header">HEADER</div>
      <div id="menu">MENU</div>
      <div id="content">CONTENT</div>
      <div id="other">OTHER</div>
      <div id="footer">FOOTER</div>
   </div>
   
</body>
</html>

Output

CONTENT

OTHER

Note - The grid-area property is used to define the location and size of a grid item in grid layout.

Note - The grid-template-areas property is used to define the area of a/multiple grid item(s) in grid layout.

Note - The description of flex Vs grid is described in its separate tutorial.

CSS display: inline-block Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      ul li{background-color: purple; width: 120px;
         padding: 12px; color: white; text-align: center;}
      ul.two li{display: inline-block;}
   </style>
</head>
<body>
   
   <h2>Without display: inline-block</h2>
   <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
   </ul>

   <h2>With display: inline-block</h2>
   <ul class="two">
      <li>A</li>
      <li>B</li>
      <li>C</li>
   </ul>

</body>
</html>

Output

Without display: inline-block

With display: inline-block

Note - The description of inline Vs inline-block is described in its separate tutorial.

CSS display: inline-grid Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .two{gap: 2px; color: whitesmoke; grid-template-areas: 'h h h' 'n m m' 'f f f';}
      .two > div {background-color: green; padding: 4px; text-align: center;}

      #header {grid-area: h;}
      #menu {grid-area: n;}
      #content {grid-area: m; min-height: 100px;}
      #footer {grid-area: f;}

      .two {display: inline-grid;}
   </style>
</head>
<body>

   <h2>display: inline-grid</h2>
   <div class="two">
      <div id="header">HEADER</div>
      <div id="menu">MENU</div>
      <div id="content">CONTENT</div>
      <div id="footer">FOOTER</div>
   </div>
   <div class="two">
      <div id="header">HEADER</div>
      <div id="menu">MENU</div>
      <div id="content">CONTENT</div>
      <div id="footer">FOOTER</div>
   </div>
   
</body>
</html>

Output

display: inline-grid

CONTENT

Note - The description of grid Vs inline-grid is described in its separate tutorial.

CSS display: table, table-row, table-cell Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .one{display: table;}
      .row{display: table-row;}
      .data{display: table-cell; padding: 12px; border: 1px solid;}
   </style>
</head>
<body>
   
   <h2>display: table, display: table-row, display: table-cell Example</h2>
   <div class="one">
      <div class="row">
         <div class="data">Matteo</div>
         <div class="data">Munich, Germany</div>
      </div>
      <div class="row">
         <div class="data">Clara</div>
         <div class="data">Amsterdam, Netherlands</div>
      </div>
      <div class="row">
         <div class="data">Jakob</div>
         <div class="data">Mar del Plata, Argentina</div>
      </div>
   </div>
   
</body>
</html>

Output

display: table, display: table-row, display: table-cell Example

Matteo

Munich, Germany

Clara

Amsterdam, Netherlands

Jakob

Mar del Plata, Argentina

As shown in above example, the other table related values that can be used to define display property, works in similar way, based on its description given before the start of example series.

CSS display: inline-table Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .row{display: table-row;}
      .data{display: table-cell; padding: 12px; border: 1px solid;}

      .one{display: table;}
      .two{display: inline-table;}
   </style>
</head>
<body>
   
   <h2>display: table</h2>
   <div class="one">
      <div class="row">
         <div class="data">Leo</div>
         <div class="data">Berlin</div>
      </div>
      <div class="row">
         <div class="data">Anton</div>
         <div class="data">Munich</div>
      </div>
      <div class="row">
         <div class="data">Oskar</div>
         <div class="data">Cologne</div>
      </div>
   </div>
   <div class="one">
      <div class="row">
         <div class="data">Levi</div>
         <div class="data">Dresden</div>
      </div>
      <div class="row">
         <div class="data">Lukas</div>
         <div class="data">Hamburg</div>
      </div>
      <div class="row">
         <div class="data">Charlotte</div>
         <div class="data">Frankfurt</div>
      </div>
   </div>

   <h2>display: inline-table</h2>
   <div class="two">
      <div class="row">
         <div class="data">Leo</div>
         <div class="data">Berlin</div>
      </div>
      <div class="row">
         <div class="data">Anton</div>
         <div class="data">Munich</div>
      </div>
      <div class="row">
         <div class="data">Oskar</div>
         <div class="data">Cologne</div>
      </div>
   </div>
   <div class="two">
      <div class="row">
         <div class="data">Levi</div>
         <div class="data">Dresden</div>
      </div>
      <div class="row">
         <div class="data">Lukas</div>
         <div class="data">Hamburg</div>
      </div>
      <div class="row">
         <div class="data">Charlotte</div>
         <div class="data">Frankfurt</div>
      </div>
   </div>
   
</body>
</html>

Output

display: table

Leo

Berlin

Anton

Munich

Oskar

Cologne

Levi

Dresden

Lukas

Hamburg

Charlotte

Frankfurt

display: inline-table

Leo

Berlin

Anton

Munich

Oskar

Cologne

Levi

Dresden

Lukas

Hamburg

Charlotte

Frankfurt

Note - The display: inline-table makes the table container inline.

CSS display: none Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .myd{display: none;}
   </style>
</head>
<body>
   
   <div>First DIV</div>
   <div class="myd">Second DIV</div>
   <div>Third DIV</div>
   
</body>
</html>

Output

First DIV

Second DIV

Third DIV

That is, the display: none defined to any element hides/disappears the element from the web.

CSS Online Test

« Previous Tutorial Next Tutorial »