CSS display Property

Previous
Quiz
Next

The display Property

CSS display property specifies the behaviour of HTML elements. It defines how an elements is displayed on the webpage.

Syntax

display: value;

Display Property Values

Value Description
inline It displays the element as an inline element on which width and height properties do not have any effect. Default.
block It displays the element as a block element which starts on a new line and takes up the whole width.
contents It make an element disappear from the layout while keeping its child elements visible and in their original positions within the layout.
flex It displays an element as a block-level flex container.
grid It displays an element as a block-level grid container.
inline-block It allows an element to flow along with other inline elements along with having block-level characteristics such as width and height.
inline-flex It displays an element as an inline-level flex container.
inline-grid It displays an element as an inline-level grid container.
inline-table It displays the element as an inline-level table.
run-in It displays an element depending on context as either block or inline.
table It enables the element to behave like a <table> element.
table-caption It enables the element to behave like a <caption> element.
table-column-group It enables the element to behave like a <colgroup> element.
table-header-group It enables the element to behave like a <thead> element.
table-footer-group It enables the element to behave like a <tfoot> element.
table-row-group It enables the element to behave like a <tbody> element
table-cell It enables the element to behave like a <td> element.
table-column It enables the element to behave like a <col> element.
table-row It enables the element to behave like a <tr> element.
none It removes the element completely.
initial This sets the property to its default value.
inherit This inherits the property from the parent element.

CSS display Property with inline Value

The following example illustrates the use of inline value on div elements making them appear as inline element.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .inline-item {
         display: inline;
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
      }

      .container {
         border: 3px solid #ccc;
         padding: 15px;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: inline 
   </h4>
   <div class="container">
      <div class="inline-item">
         Item 1
      </div>
      <div class="inline-item">
         Item 2
      </div>
      <div class="inline-item">
         Item 3
      </div>
   </div>
</body>

</html>

CSS display Property with block Value

The following example illustrates the use of block value on span elements making them appear as block element.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .block-item {
         display: block;
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
      }

      .container {
         border: 3px solid #ccc;
         padding: 15px;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: block 
   </h4>
   <div class="container">
      <span class="block-item">
         Item 1
      </span>
      <span class="block-item">
         Item 2
      </span>
      <span class="block-item">
         Item 3
      </span>
   </div>
</body>

</html>

CSS display Property with Contents Value

The following example illustrates the use of the contents value. In this example, the .child element behaves as direct child of .parent element bypassing the .wrapper element.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .wrapper {
         display: contents;
      }

      .child {
         text-align: center;
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
      }

      .parent {
         display: block;
         background-color: #f0f0f0;
         padding: 10px;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: contents
   </h4>
   <div class="parent">
      <div class="wrapper">
         <div class="child">
            Child 1
         </div>
         <div class="child">
            Child 2
         </div>
         <div class="child">
            Child 3
         </div>
      </div>
   </div>
</body>

</html>

CSS display Property with Flex Value

To set an element to be a flex container making its children (flex items) layout in a flexible and responsive way, we use the flex value. The container uses the Flexbox layout model, which allows for easy alignment, distribution, and ordering of items along a single axis. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         background-color: #f0f0f0;
         padding: 10px;
      }

      .flex-item {
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
         flex: 1;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: flex
   </h4>
   <div class="flex-container">
      <div class="flex-item">
         Item 1
      </div>
      <div class="flex-item">
         Item 2
      </div>
      <div class="flex-item">
         Item 3
      </div>
   </div>
</body>

</html>

CSS display Property with Grid Value

To set an element to be a grid container which uses the grid layout model, allowing for the creation of two-dimensional layouts with rows and columns, we use the grid value. Grid items can be placed and sized explicitly or automatically across the grid. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: grid;
         background-color: #f0f0f0;
         padding: 10px;
         gap: 10px;
      }

      .grid-item {
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: grid
   </h4>
   <div class="grid-container">
      <div class="grid-item">
         Item 1
      </div>
      <div class="grid-item">
         Item 2
      </div>
      <div class="grid-item">
         Item 3
      </div>
   </div>
</body>

</html>

CSS display Property with Inline Block Value

To make an element behave like an inline-level element (allowing it to flow with text and other inline content) while retaining block-level properties such as width and height, we use the inline-block value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .inline-block-item {
         text-align: center;
         display: inline-block;
         width: 200px;
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
      }

      .container {
         border: 3px solid #ccc;
         padding: 15px;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: inline-block 
   </h4>
   <div class="container">
      <span class="inline-block-item">
         Item 1
      </span>
      <span class="inline-block-item">
         Item 2
      </span>
      <span class="inline-block-item">
         Item 3
      </span>
   </div>
</body>

</html>

CSS display Property with Inline Flex Property

To set an element to be an inline-level flex container making the container behaves like an inline element, flowing with surrounding text or inline elements, while still applying Flexbox layout rules to its children, we use the inline-flex property. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .inline-flex-container {
         display: inline-flex;
         background-color: #f0f0f0;
         padding: 10px;
      }

      .flex-item {
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
         flex: 1;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: inline-flex
   </h4>
   <div class="inline-flex-container">
      <div class="flex-item">
         Item 1
      </div>
      <div class="flex-item">
         Item 2
      </div>
      <div class="flex-item">
         Item 3
      </div>
   </div>
</body>

</html>

CSS display Property with Inline Grid Value

To set an element to be an inline-level grid container such that it behaves like an inline element (flowing with text and other inline content) while using the grid layout model to arrange its children, we use the inline-grid value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: inline-grid;
         background-color: #f0f0f0;
         padding: 10px;
         gap: 10px;
      }

      .inline-grid-item {
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: inline-grid
   </h4>
   <div class="grid-container">
      <div class="inline-grid-item">
         Item 1
      </div>
      <div class="inline-grid-item">
         Item 2
      </div>
      <div class="inline-grid-item">
         Item 3
      </div>
   </div>
</body>

</html>

CSS display Property with Run In Value

To make an element behave as a block-level element or an inline-level element depending on the context, we use the run-in value. It is intended to allow an element to "run in" with surrounding text or other elements. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .block-container {
         display: block;
         background-color: #f0f0f0;
         padding: 10px;
      }

      .run-in {
         display: run-in;
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: run-in
   </h4>
   <div class="block-container">
      <div class="run-in">
         Run-In Element
      </div>
      <p>
         This paragraph follows the run-in element. Depending on 
         the browser support, the run-in element might appear 
         as a block or inline element here.
      </p>
   </div>
</body>

</html>

CSS display Property with list-item Value

The following example illustrates the use of list-item value on div elements making them appear as bulleted list.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .list-item {
         display: list-item;
         background-color: #4CAF50;
         padding: 10px;
         margin: 10px;
         text-align: center;

      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h3>
      display: list item
   </h3>
   <div class="list-item">
      Item 1
   </div>
   <div class="list-item">
      Item 2
   </div>
   <div class="list-item">
      Item 3
   </div>

</body>

</html>

CSS display Property with Table Values

To create table-like layouts with CSS without using HTML table elements, we can use different displays for the table. In the following example, some values table, table-row, table-cell and table-caption have been used.

  • table: creates a container that behaves like a <table>,
  • table-cell: styles elements like <td> cells,
  • table-row: defines elements as rows like <tr>,
  • table-caption: functions like a <caption> element, positioning captions for the table.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         background-color: #4CAF50;
         color: white;
         display: flex;
         border: 1px solid black;
      }

      .table {
         display: table;
      }

      .row {
         display: table-row;
         padding: 3px;
      }

      .cell {
         display: table-cell;
         padding: 3px;
      }

      .caption {
         display: table-caption;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: table, table-row, table-cell, table-caption
   </h4>
   <div class="table">
      <div class="caption">
         Sample Table
      </div>
      <div class="row">
         <div class="cell">
            Row1-Cell1
         </div>
         <div class="cell">
            Row1-Cell2
         </div>
         <div class="cell">
            Row1-Cell3
         </div>
      </div>
      <div class="row">
         <div class="cell">
            Row2-Cell1
         </div>
         <div class="cell">
            Row2-Cell2
         </div>
         <div class="cell">
            Row2-Cell3
         </div>
      </div>
      <div class="row">
         <div class="cell">
            Row3-Cell1
         </div>
         <div class="cell">
            Row3-Cell2
         </div>
         <div class="cell">
            Row3-Cell3
         </div>
      </div>
   </div>
</body>

</html>

CSS display Property with none Value

The following example illustrates the use of none value on div elements to hide the element.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .hidden {
         display: none;
      }

      .visible {
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 10px;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>display: none</h4>
   <div class="visible">
      This is visible
   </div>
   <div class="hidden">
      This is hidden
   </div>
   <div class="visible">
      This is also visible
   </div>
</body>

</html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
display 4.0 8.5 3.0 3.1 7.0
Print Page
Previous
Next
Advertisements