CSS Display Property

Master the CSS display property to control how elements are rendered, including block, inline, inline-block, flex, grid, and none.

The display property is one of the most important CSS properties. It controls how an element is displayed on the page and determines its layout behavior.

Display Values

Block

Block-level elements start on a new line and take up the full width available.

.block {
  display: block;
}

Common block elements: <div>, <p>, <h1>-<h6>, <section>, <article>, <header>, <footer>, <nav>

Characteristics:

Takes full width by default
Starts on a new line
Accepts width and height properties
Can have margin and padding on all sides

Inline

Inline elements don't start on a new line and only take up as much width as necessary.

.inline {
  display: inline;
}

Common inline elements: <span>, <a>, <strong>, <em>, <img>, <code>

Characteristics:

Takes only needed width
Doesn't start a new line
Width and height properties have no effect
Vertical margin and padding may not work as expected

Inline-Block

Combines features of both inline and block elements.

.inline-block {
  display: inline-block;
}

Characteristics:

Flows inline with text
Accepts width and height
Respects margin and padding on all sides
Perfect for navigation items, buttons, etc.

None

Hides the element completely (removes it from the document flow).

.hidden {
  display: none; /* Element is not rendered */
}

Use cases:

Toggling visibility with JavaScript
Responsive design (hide on certain screen sizes)
Conditional content display

Flex

Creates a flex container for flexbox layout.

.flex-container {
  display: flex; /* or inline-flex */
}

See the Flexbox tutorial for details.

Grid

Creates a grid container for grid layout.

.grid-container {
  display: grid; /* or inline-grid */
}

See the Grid tutorial for details.

Other Display Values

.table { display: table; }
.table-row { display: table-row; }
.table-cell { display: table-cell; }
.table-header { display: table-header-group; }
.table-footer { display: table-footer-group; }

List Item

.list-item {
  display: list-item;
}

The element itself doesn't generate a box, but its children do.

.contents {
  display: contents;
}

Practical Examples

Converting Between Display Types

<!DOCTYPE html>
<html>
<head>
<style>
  /* Make links display as blocks for vertical navigation */
  .nav-vertical a {
    display: block;
    padding: 10px;
    background-color: #f0f0f0;
    margin-bottom: 5px;
    text-decoration: none;
    color: #333;
  }
  
  /* Make divs display inline for horizontal layout */
  .nav-horizontal div {
    display: inline-block;
    margin-right: 10px;
    padding: 5px 10px;
    background-color: #3498db;
    color: white;
  }
</style>
</head>
<body>
  <nav class="nav-vertical">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </nav>
  
  <div class="nav-horizontal">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
</body>
</html>

Toggle Visibility

<style>
  .modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .modal.active {
    display: block; /* Show when active */
  }
</style>

<div class="modal">
  <div class="modal-content">
    <h2>Modal Title</h2>
    <p>Modal content here...</p>
  </div>
</div>

Responsive Images Grid

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.image-item {
  display: inline-block;
  width: calc(33.333% - 10px);
}

@media (max-width: 768px) {
  .image-item {
    width: calc(50% - 10px);
  }
}

@media (max-width: 480px) {
  .image-item {
    width: 100%;
  }
}

Display vs Visibility

/* display: none - Element removed from document flow */
.hidden {
  display: none;
}

/* visibility: hidden - Element hidden but still takes up space */
.invisible {
  visibility: hidden;
}

/* opacity: 0 - Element invisible but interactive */
.transparent {
  opacity: 0;
}

<style>
  /* Inline-block navigation */
  .nav-inline li {
    display: inline-block;
    margin-right: 20px;
  }
  
  /* Flexbox navigation (modern approach) */
  .nav-flex {
    display: flex;
    gap: 20px;
  }
</style>

<ul class="nav-inline">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

<ul class="nav-flex">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Common Use Cases

Centering with Inline-Block

.center-container {
  text-align: center;
}

.centered-box {
  display: inline-block;
  text-align: left; /* Reset text alignment */
  padding: 20px;
  background-color: #f0f0f0;
}

Card Layout

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  display: block;
  width: 300px;
  padding: 20px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Best Practices

Display Tips

Use display: flex or display: grid for modern layouts
Use display: none for hiding elements (accessibility: hidden content won't be read by screen readers)
Use inline-block for elements that need width/height but should flow inline
Remember that display affects the box model behavior
Consider using visibility: hidden if you need to hide but preserve layout space
Use responsive display values with media queries
Avoid using display: inline on elements that need width/height

Browser Compatibility

All major display values have excellent browser support. Modern values like flex and grid are supported in all current browsers.

Summary

The display property is fundamental to CSS layouts:

Block: Full-width, new line, accepts all dimensions
Inline: Content-width, flows in line, limited dimension control
Inline-block: Best of both worlds
None: Completely hidden
Flex: Modern one-dimensional layouts
Grid: Modern two-dimensional layouts

Understanding display is essential for controlling element behavior and creating effective layouts!

The display property is one of the most important CSS properties. It controls how an element is displayed on the page and determines its layout behavior.

Display Values

Block

Block-level elements start on a new line and take up the full width available.

.block {
  display: block;
}

Common block elements: <div>, <p>, <h1>-<h6>, <section>, <article>, <header>, <footer>, <nav>

Characteristics:

Takes full width by default
Starts on a new line
Accepts width and height properties
Can have margin and padding on all sides

Inline

Inline elements don't start on a new line and only take up as much width as necessary.

.inline {
  display: inline;
}

Common inline elements: <span>, <a>, <strong>, <em>, <img>, <code>

Characteristics:

Takes only needed width
Doesn't start a new line
Width and height properties have no effect
Vertical margin and padding may not work as expected

Inline-Block

Combines features of both inline and block elements.

.inline-block {
  display: inline-block;
}

Characteristics:

Flows inline with text
Accepts width and height
Respects margin and padding on all sides
Perfect for navigation items, buttons, etc.

None

Hides the element completely (removes it from the document flow).

.hidden {
  display: none; /* Element is not rendered */
}

Use cases:

Toggling visibility with JavaScript
Responsive design (hide on certain screen sizes)
Conditional content display

Flex

Creates a flex container for flexbox layout.

.flex-container {
  display: flex; /* or inline-flex */
}

See the Flexbox tutorial for details.

Grid

Creates a grid container for grid layout.

.grid-container {
  display: grid; /* or inline-grid */
}

See the Grid tutorial for details.

Other Display Values

.table { display: table; }
.table-row { display: table-row; }
.table-cell { display: table-cell; }
.table-header { display: table-header-group; }
.table-footer { display: table-footer-group; }

List Item

.list-item {
  display: list-item;
}

The element itself doesn't generate a box, but its children do.

.contents {
  display: contents;
}

Practical Examples

Converting Between Display Types

<!DOCTYPE html>
<html>
<head>
<style>
  /* Make links display as blocks for vertical navigation */
  .nav-vertical a {
    display: block;
    padding: 10px;
    background-color: #f0f0f0;
    margin-bottom: 5px;
    text-decoration: none;
    color: #333;
  }
  
  /* Make divs display inline for horizontal layout */
  .nav-horizontal div {
    display: inline-block;
    margin-right: 10px;
    padding: 5px 10px;
    background-color: #3498db;
    color: white;
  }
</style>
</head>
<body>
  <nav class="nav-vertical">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </nav>
  
  <div class="nav-horizontal">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
</body>
</html>

Toggle Visibility

<style>
  .modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .modal.active {
    display: block; /* Show when active */
  }
</style>

<div class="modal">
  <div class="modal-content">
    <h2>Modal Title</h2>
    <p>Modal content here...</p>
  </div>
</div>

Responsive Images Grid

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.image-item {
  display: inline-block;
  width: calc(33.333% - 10px);
}

@media (max-width: 768px) {
  .image-item {
    width: calc(50% - 10px);
  }
}

@media (max-width: 480px) {
  .image-item {
    width: 100%;
  }
}

Display vs Visibility

/* display: none - Element removed from document flow */
.hidden {
  display: none;
}

/* visibility: hidden - Element hidden but still takes up space */
.invisible {
  visibility: hidden;
}

/* opacity: 0 - Element invisible but interactive */
.transparent {
  opacity: 0;
}

<style>
  /* Inline-block navigation */
  .nav-inline li {
    display: inline-block;
    margin-right: 20px;
  }
  
  /* Flexbox navigation (modern approach) */
  .nav-flex {
    display: flex;
    gap: 20px;
  }
</style>

<ul class="nav-inline">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

<ul class="nav-flex">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Common Use Cases

Centering with Inline-Block

.center-container {
  text-align: center;
}

.centered-box {
  display: inline-block;
  text-align: left; /* Reset text alignment */
  padding: 20px;
  background-color: #f0f0f0;
}

Card Layout

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  display: block;
  width: 300px;
  padding: 20px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Best Practices

Display Tips

Use display: flex or display: grid for modern layouts
Use display: none for hiding elements (accessibility: hidden content won't be read by screen readers)
Use inline-block for elements that need width/height but should flow inline
Remember that display affects the box model behavior
Consider using visibility: hidden if you need to hide but preserve layout space
Use responsive display values with media queries
Avoid using display: inline on elements that need width/height

Browser Compatibility

All major display values have excellent browser support. Modern values like flex and grid are supported in all current browsers.

Summary

The display property is fundamental to CSS layouts:

Block: Full-width, new line, accepts all dimensions
Inline: Content-width, flows in line, limited dimension control
Inline-block: Best of both worlds
None: Completely hidden
Flex: Modern one-dimensional layouts
Grid: Modern two-dimensional layouts

Understanding display is essential for controlling element behavior and creating effective layouts!

CSS Display Property

On this page

CSS Display Property

On this page