CSS - display Property

Previous
Next

The display property in CSS is used to specify how an element should be displayed on the webpage. It controls the layout and visibility of an element.

The display property is useful in setting the inner and outer display types of an element.

Possible Values

The value passed to the display property is a keyword. These keyword values are categorised in six different groups, which are as follows:

  • Outside Values (<display-outside>): Values under this head specify the outer display type of an element.

    • inline: Makes the element behave like an inline element, allowing other elements to appear beside it on the same line. Examples: <span>, <img>, <a>, etc.

    • block: Makes the element behave like a block-level element, taking up the entire width of its parent container and creating a new line before and after it. Examples: <div>, <form>, <p>, etc.

  • Inside Values (<display-inside>): Values under this head specify the inner display type of an element.

    • flow: Element displays its contents using flow layout (block and inline layout)

    • flow-root: Element displays a block box, referring to its formatting roots.

    • table: Defines a block-level box, behaving like a HTML <table> elements.

    • flex: Defines a block-level box, behaves as per the flexbox model.

    • grid: Defines a block-level box, behaves as per the grid model.

    • ruby: Defines an inline-level element and behaves as per ruby formatting model.

  • List Item Values (<display-listitem>): Makes the element behave like a list item marker, typically used with <li> elements.

    • A single value represents a single list-item.

    • Can be used along with list-style-type and list-style-position.

    • The list-item can be paired with any outside display value and the flow or flow-root inside display values.

  • Internal Values (<display-internal>): Layouts with complex internal structure, such as, table and ruby use this property to display their content.

    • table-row-group: Behaves like <tbody> HTML element.

    • table-header-group: Behaves like <thead> HTML element.

    • table-footer-group: Behaves like <tfoot> HTML element.

    • table-row: Behaves like <tr> HTML element.

    • table-cell: Behaves like <td> HTML element.

    • table-column-group: Behaves like <colgroup> HTML element.

    • table-column: Behaves like <col> HTML element.

    • table-caption: Behaves like <caption> HTML element.

    • ruby-base: Behaves like <rb> HTML element.

    • ruby-text: Behaves like <rt> HTML element.

    • ruby-base-container: Generated as anonymous boxes.

    • ruby-text-container: Behaves like <rtc> HTML element.

  • Box Values (<display-box>): Defines whether a display box is generated by an element or not.

    • contents: Display of the element is replaced by its contents, i.e. its children and pseudo-elements.

    • none: Turns off the display of the element and its descendants.

  • Precomposed Values (<display-legacy>): A single-keyword value that is precomposed. Requires separate keyword for block and inline level elements.

    • inline-block: Makes an element display as an inline-level block container. Same as inline flow-root.

    • inline-table: Specifies that an element should behave like a table, but still be inline within a block-level context. Same as inline table.

    • inline-flex: Allows an element to have a flexible box layout while participating in an inline-level context. Same as inline flex.

    • inline-grid: Specifies that a grid container should be treated as an inline-level element. Same as inline grid.

Applies to

All the HTML elements.

DOM Syntax

object.style.display = 'display:inline-flex';

CSS display - inline Value

Here is an example for display:inline:

<html>
<head>
<style>
   li {
      display: inline;
      font-size: 2rem;
      border: 1px solid red;
      margin: 5px;
   }
</style>
</head>
<body>
   <h2>Display - Inline</h2>
   <li>Item1</li>
   <li>Item2</li>
   <li>Item3</li>
   <li>Item4</li>
</body>
</html>

CSS display - block Value

Here is an example for display:block:

<html>
<head>
<style>
   li {
      display: block;
      font-size: 2rem;
      border: 1px solid red;
      margin: 5px;
      background-color:aquamarine;
      width: 200px;
   }
</style>
</head>
<body>
   <h2>Display - Block</h2>
   <li>Item1</li>
   <li>Item2</li>
   <li>Item3</li>
   <li>Item4</li>
</body>
</html>

CSS display - inline-block Value

Here is an example for display:inline-block:

<html>
<head>
<style>
   div {
      display: inline-block;
      font-size: 2rem;
      border: 1px solid red;
      margin: 5px;
      background-color: aquamarine;
      height: 100px;
      width: 200px;
   }
</style>
</head>
<body>
   <h2>display: inline-block</h2>
   <div>Inline-Block 1</div>
   <div>Inline-Block 2</div>
   <div>Inline-Block 3</div>
</body>
</html>

CSS display - none Value

Here is an example for display:none:

<html>
<head>
<style>
   div {
      font-size: 2rem;
      border: 1px solid red;
      margin: 5px;
      background-color: aquamarine;
      height: 100px;
      width: 200px;
   }
   div.ib {
      display: inline-block;
   }
   div.none {
      display:none;
   }
</style>
</head>
<body>
   <h2>display: none (Block 2)</h2>
   <div class="ib">Block 1</div>
   <div class="none">Block 2</div>
   <div class="ib">Block 3</div>
</body>
</html>

CSS display - With table Values

Here is an example for display:table, display:table-cell, display:table-row, display:table-caption:

<html>
<head>
<style>
   div {
      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>
   <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 - flex Value

Here is an example for display:flex:

<html>
<head>
<style>
   div {
      display: flex;
      font-size: 2rem;
      border: 1px solid red;
      margin: 10px;
      background-color: aquamarine;
      height: 50px;
      width: 200px;
   }
</style>
</head>
<body>
   <h2>display: flex</h2>
   <div>Flex-Block 1</div>
   <div>Flex-Block 2</div>
   <div>Flex-Block 3</div>
</body>
</html>

CSS display - inline-flex Value

Here is an example for display:inline-flex:

<html>
<head>
<style>
   div {
      display: inline-flex;
      font-size: 2rem;
      border: 1px solid red;
      margin: 10px;
      background-color: aquamarine;
      height: 50px;
      width: 280px;
   }
</style>
</head>
<body>
   <h2>display: inline-flex</h2>
   <div>Inline Flex-Block 1</div>
   <div>Inline Flex-Block 2</div>
   <div>Inline Flex-Block 3</div>
</body>
</html>

CSS display - grid Value

Here is an example for display:grid:

<html>
<head>
<style>
   div {
      display: grid
      font-size: 2rem;
      border: 1px solid red;
      margin: 10px;
      background-color: aquamarine;
      height: 50px;
      width: 280px;
      marg
   }
</style>
</head>
<body>
   <h2>display: grid</h2>
   <div>grid-Block 1</div>
   <div>grid-Block 2</div>
   <div>grid-Block 3</div>
</body>
</html>

CSS display - inline-grid Value

Here is an example for display:inline-grid:

<html>
<head>
<style>
   div {
      display: inline-grid
      font-size: 2rem;
      border: 1px solid red;
      margin: 10px;
      background-color: aquamarine;
      height: 50px;
      width: 280px;
   }
</style>
</head>
<body>
   <h2>display: inline-grid</h2>
   <div>inline grid-Block 1</div>
   <div>inline grid-Block 2</div>
   <div>inline grid-Block 3</div>
</body>
</html>

CSS display - list-item Value

Here is an example for display:list-item:

<html>
<head>
<style>
   li {
      display: list-item;
      font-size: 2rem;
      border: 1px solid red;
      margin: 10px;
      background-color: aquamarine;
      height: 50px;
      width: 280px;
   }
</style>
</head>
<body>
   <h2>display: list-item</h2>
   <div>
      <ul>
         <li>list item 1</li>
         <li>list item 2</li>
         <li>list item 3</li>
      </ul>
   </div>
</body>
</html>
Print Page
Previous
Next
Advertisements