CSS Display Property Example

CSS display property helps to define how any html element to be displayed on any web page; we can hide and show html element using CSS display property, depending on what value we set for display property, the web page look will change. display: value;

Here are the different values of css display.

div.ex1 {display: block;}
div.ex2 {display: inline;}
div.ex3 {display: inline-block;}
div.ex4 {display: none;}

Here are some examples of how to apply css display property to any html element.

• display block example
  display: block

  .ex1 {display: block;}
  <div class="ex1">display: block</div>
  

• display none example, Display none is just opposite to display block, very similar to hide and show, when we don’t want to display any element on screen, we use display:none;
  display: none

  .ex1a {display: none;}
  <div class="ex1">display: block</div>
  

• display inline example, displays any html element like span as an inline element, it will just look like a simple text line Hello friends, display: inline

  .ex2 {display: inline;}
  <span class="ex2">display: inline</span>
  

• display inline-flexbox example, displays any html element as an inline-level flex container Hello friends,
  display: inline-flexbox

  .ex3 {display: inline-flexbox;}
  <div class="ex3">display: inline-flexbox</div>
  

• display grid example

  Here you can see an example of how you can display div side by side using CSS.

  1

  2

  3

  4

  .ex4 {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: [col1-start] 100px [col2-start] 100px [col3-start] 100px [col3-end];
      grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
      background-color: #fff;
      color: #444;
  }
  .a {
      grid-column: col1-start / col3-start;
      grid-row: row1-start;
  }
  .b {
      grid-column: col3-start;
      grid-row: row1-start / row2-end;
  }
  .c {
      grid-column: col1-start;
      grid-row: row2-start;
  }
  .d {
      grid-column: col2-start;
      grid-row: row2-start;
  }
  .box {
      background-color: #444;
      color: #fff;
      border-radius: 5px;
      padding: 20px;
      font-size: 150%;
  }
  <div class="ex4">
  	<div class="box a">1</div>
  	<div class="box b">2</div>
  	<div class="box c">3</div>
  	<div class="box d">4</div>
  </div>
  

Note, like other CSS display property, grid property will work on only html div element, but other display property like none, block etc can be applied on any html element.