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:

CSS display: inline Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      ul.codescracker 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="codescracker">
      <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>
      .codescracker{display: block; color: red;}
   </style>
</head>
<body>
   
   <h2>Without display: block</h2>
   <p>Lorem ipsum dolor sit amet CODESCRACKER consectetur adipisicing elit.</p>

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

</body>
</html>
Output

Without display: block

Lorem ipsum dolor sit amet CODESCRACKER consectetur adipisicing elit.

With display: block

Lorem ipsum dolor sit amet CODESCRACKER consectetur adipisicing elit.

Since display: block makes an element behaves like a P element. Therefore, the SPAN element whose class name is codescracker 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

A
B
C

display: contents

A
B
C

Again Without display: contents

A
B
C

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>
      .codescracker{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="codescracker">
      <div>A</div>
      <div>B</div>
      <div>C</div>
   </div>
   
</body>
</html>
Output

Without display: flex

A
B
C

With display: flex

A
B
C

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

  • A
  • B
  • C

With display: inline-block

  • A
  • B
  • C

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
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 »


Liked this post? Share it!