CSS display Property

The display property defines the type of the box which is used for an HTML element. The default value of this property is "inline". An inline element will not accept height and width properties. It will just ignore it.

With the display property we can override the initial value of an element. For example, a block-level element could be displayed as an inline element by specifying a value of "inline".

In HTML, the default values of the display property are taken from the behaviors which are described in the HTML specifications or from the browser or user default stylesheet. On the other hand, the default value in XML is "inline".

Initial Value inline
Applies to All elements.
Inherited No
Animatable No
Version CSS1
DOM Syntax object.style.display = "list-item";

Syntax

display: inline | block | contents | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>                    
      .display li{   	
      display: inline;
      margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the list item is with its initial value:</p>
    <ul>
      <li>List iteam</li>
      <li>List iteam</li>
    </ul>
    <p>Here the list item is used with the display property. The "inline" value is used:</p>
    <ul class="display">
      <li>List iteam 1</li>
      <li>List iteam 2</li>
    </ul>
  </body>
</html>

Another example where the element is displayed as a block element. The "inline" value does not accept height and width:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>  
      .inline {
      border: 1px solid #1c87c9;  
      display: inline; 	
      height: 30px;
      width: 300px;
      }                  
      .block {
      border: 1px solid #1c87c9;   	
      display: block;
      height: 30px;
      width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the list item is with "initial" value. We see that the "inline" value does not accept height and width:</p>
    <span>This is some text.</span>
    <span class="inline">This is another text.</span>
    <hr>
    <p>Here the list item is used with the "block" value of the display property:</p>
    <span class="block">This is some text.</span>
    <span class="block">This is another text.</span>              
  </body>
</html>

See another example with the "block" value:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .block {
      display: block;
      border: 1px solid #666;
      background-color: #eee;
      padding: 10px;
      width: 200px;
      }
      .hello {
      border: 1px solid #1c87c9;
      background-color: #8ebf42;
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <div class="block">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
      <div class="hello">HELLO!</div>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
    </div>
  </body>
</html>

An example with the "contents" value:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .contents {
      display: contents;
      border: 1px solid #666;
      background-color: #eee;
      padding: 10px;
      width: 200px;
      }
      .hello {
      border: 1px solid #1c87c9;
      background-color: #ccc;
      padding: 10px;
      text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <div class="contents">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      <div class="hello">HELLO!</div>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
    </div>
  </body>
</html>

See an example with the "flex" value:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      #flex {
      width: 300px;
      height: 100px;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; /* Safari */
      -webkit-justify-content: center; /* Safari 6.1+ */
      display: flex;
      justify-content: center;
      }
      div {
      width: 70px;
      height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the "display: flex;" is used:</p>
    <div id="flex">
      <div style="background-color: #1c87c9;">1</div>
      <div style="background-color: #666;">2</div>
      <div style="background-color: #8ebf42;">3</div>
    </div>
  </body>
</html>

Values

Value Description
inline Displays an element as an inline element. This is the default value of this property.
block Displays an element as a block element.
contents Makes the container disappear, making the child elements children of the element the next level up in the DOM.
flex Displays an element as a block-level-flex container.
grid Displays an element as a block-level grid container.
inline-block Displays an element as an inline-level block container.
inline-flex Displays an element as an inline-level flex container.
inline-grid Displays an element as an inline-level grid container.
inline-table Displays an element as an inline-level table. It behaves like a HTML <table> element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.
list-item Makes the element behave like HTML <li> element.
run-in Displays an element as block or inline according to context.
table Makes the element behave like HTML <table> element.
table-caption Makes the element behave like HTML <caption> element.
table-column-group Makes the element behave like HTML <colgroup> element.
table-header-group Makes the element behave like HTML <thead> element.
table-footer-group Makes the element behave like HTML <tfoot> element.
table-row-group Makes the element behave like HTML <tbody> element.
table-cell Makes the element behave like HTML <td> element.
table-column Makes the element behave like HTML <col> element.
table-row Makes the element behave like HTML <tr> element.
none Means that the element won't be shown at all.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.




Related articles