The various values of the display property

The display property is one of the core properties in CSS that controls the layout of elements, determining how they behave in the document flow. Different values directly affect the element's box model, arrangement, and interaction with other elements.

display: block

Block-level elements occupy the entire line by default, filling the width of their parent container. They can have their width, height, margins, and padding set. Common block-level elements include <div>, <p>, <h1>-<h6>, etc.

<style>
  .box {
    display: block;
    width: 200px;
    height: 100px;
    background-color: coral;
    margin: 10px auto;
  }
</style>
<div class="box">This is a block-level box</div>

Block-level elements force a line break even if their width doesn't fill the entire line:

<div style="display:block; width:50%; background:lightblue">Block element 1</div>
<div style="display:block; width:50%; background:lightgreen">Block element 2</div>

display: inline

Inline elements do not occupy the entire line; their width is determined by their content. Width and height cannot be set. Common inline elements include <span>, <a>, <strong>, etc.

<style>
  .inline-item {
    display: inline;
    background-color: gold;
    /* The following properties are invalid */
    width: 100px;
    height: 50px;
    margin-top: 20px;
  }
</style>
<span class="inline-item">Inline element 1</span>
<span class="inline-item">Inline element 2</span>

Vertical margins of inline elements do not affect layout:

<span style="display:inline; margin:50px; background:pink">Inline element</span>
<span>Adjacent element</span>

display: inline-block

Combines characteristics of both inline and block elements: elements are arranged in the same line but can have their width and height set. Typical use cases include navigation menu items, icon buttons, etc.

<style>
  .nav-item {
    display: inline-block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: steelblue;
    color: white;
  }
</style>
<div class="nav-item">Home</div>
<div class="nav-item">Products</div>
<div class="nav-item">About</div>

Elements wrap to the next line if their width exceeds the container:

<div style="width:200px; border:1px solid black">
  <span style="display:inline-block; width:80px; background:orange">Item A</span>
  <span style="display:inline-block; width:80px; background:orange">Item B</span>
  <span style="display:inline-block; width:80px; background:orange">Item C</span>
</div>

display: none

Completely removes the element from the rendering tree, occupying no space, though the DOM structure remains. Unlike visibility: hidden, which retains the element's space.

<style>
  .hidden {
    display: none;
  }
</style>
<div>Visible content</div>
<div class="hidden">Invisible content</div>
<div>Subsequent content</div>

Toggle visibility dynamically with JavaScript:

document.getElementById('toggle').addEventListener('click', function() {
  const box = document.querySelector('.hidden');
  box.style.display = box.style.display === 'none' ? 'block' : 'none';
});

display: flex

The flexible box layout model, controlling child element arrangement via main and cross axes. A core solution for modern responsive layouts.

<style>
  .flex-container {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: #eee;
  }
  .flex-item {
    flex: 1;
    height: 60px;
    background: violet;
  }
</style>
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

Control main axis direction and wrapping:

<style>
  .flex-column {
    display: flex;
    flex-direction: column;
    height: 200px;
  }
  .flex-wrap {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
  }
  .flex-wrap > div {
    width: 140px;
    margin: 5px;
  }
</style>

display: grid

A two-dimensional grid layout system, defining complex layouts via rows and columns.

<style>
  .grid-container {
    display: grid;
    grid-template-columns: 100px 1fr 2fr;
    grid-gap: 10px;
    height: 200px;
  }
  .grid-item {
    background: lightseagreen;
  }
  .header {
    grid-column: 1 / 4;
  }
</style>
<div class="grid-container">
  <div class="grid-item header">Header</div>
  <div class="grid-item">Sidebar</div>
  <div class="grid-item">Main content</div>
  <div class="grid-item">Additional info</div>
</div>

Responsive grid example:

<style>
  .responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
</style>

display: table

Simulates traditional table layouts, useful for cases requiring table features but using non-table elements.

<style>
  .table {
    display: table;
    width: 100%;
    border-collapse: collapse;
  }
  .row {
    display: table-row;
  }
  .cell {
    display: table-cell;
    padding: 8px;
    border: 1px solid #ddd;
  }
</style>
<div class="table">
  <div class="row">
    <div class="cell">Name</div>
    <div class="cell">Age</div>
  </div>
  <div class="row">
    <div class="cell">John</div>
    <div class="cell">28</div>
  </div>
</div>

display: list-item

Makes an element behave like a list item, often used with the ::marker pseudo-element.

<style>
  .custom-list {
    display: list-item;
    list-style-type: square;
    margin-left: 20px;
  }
</style>
<div class="custom-list">Item 1</div>
<div class="custom-list">Item 2</div>

display: inline-flex and display: inline-grid

Creates inline-level flex or grid containers, appearing as inline elements externally while maintaining flex/grid characteristics internally.

<style>
  .inline-flex-container {
    display: inline-flex;
    background: wheat;
  }
  .inline-grid-container {
    display: inline-grid;
    grid-template-columns: repeat(2, 50px);
    background: lightcyan;
  }
</style>
Text start
<span class="inline-flex-container">
  <span>Flex item 1</span>
  <span>Flex item 2</span>
</span>
Text middle
<span class="inline-grid-container">
  <span>Grid A</span>
  <span>Grid B</span>
</span>
Text end

Experimental Values

The CSS specification includes some newer experimental values:

display: contents

Causes the element itself to generate no box, with its children inheriting the parent's display context directly.

<style>
  .contents-container {
    border: 2px dashed red;
    padding: 10px;
  }
  .contents {
    display: contents;
  }
</style>
<div class="contents-container">
  <div class="contents">
    <div style="background:lightpink">Child 1</div>
    <div style="background:lightblue">Child 2</div>
  </div>
</div>

display: flow-root

Creates a new block formatting context (BFC), solving parent element height collapse caused by floats.

<style>
  .float-box {
    float: left;
    width: 100px;
    height: 100px;
    background: skyblue;
  }
  .flow-root {
    display: flow-root;
    background: pink;
  }
</style>
<div class="flow-root">
  <div class="float-box"></div>
  Text content text content text content
</div>

Multi-Keyword Syntax

CSS Display Module Level 3 introduces multi-keyword syntax for more precise control over internal and external display types:

.container {
  display: block flex; /* Externally block-level, internally flex */
}
.inline-grid {
  display: inline grid; /* Externally inline, internally grid */
}

Browser Compatibility Considerations

Some older browsers require vendor prefixes:

.legacy-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}