display

Definition

The display CSS property determines how an element is rendered and displayed on the webpage. It controls the box type and behavior of an element, affecting its layout and visibility. The display property can take various values, including block, inline, inline-block, flex, grid, and more.

Syntax

display: <display-value>;

Values

Block Elements

Block elements start on a new line and take up the full width available. They respect width, height, margin, and padding properties.

.block-element {
  display: block;
  width: 200px;
  height: 100px;
  margin: 10px;
  padding: 20px;
}

Inline Elements

Inline elements don’t start on a new line and only take up as much width as necessary. They don’t respect width, height, or vertical margins.

.inline-element {
  display: inline;
  /* width, height, and vertical margins won't work */
  margin-left: 10px;
  margin-right: 10px;
}

Inline-Block Elements

Inline-block elements behave like inline elements but respect width, height, and margins like block elements.

.inline-block-element {
  display: inline-block;
  width: 150px;
  height: 50px;
  margin: 10px;
  padding: 15px;
}

Flexbox

Flexbox creates a flexible box layout that allows elements to grow and shrink to fill available space.

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

Grid

CSS Grid creates a two-dimensional layout system with rows and columns.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

None

The none value completely removes the element from the layout and hides it.

.hidden-element {
  display: none;
}

Examples

Block vs Inline Elements

<div class="space-y-4">
  <div class="bg-blue-200 p-4 border">
    <h3 class="font-semibold mb-2">Block Elements:</h3>
    <div class="bg-red-300 p-2 mb-2">Block div 1</div>
    <div class="bg-red-300 p-2 mb-2">Block div 2</div>
    <div class="bg-red-300 p-2">Block div 3</div>
  </div>

  <div class="bg-green-200 p-4 border">
    <h3 class="font-semibold mb-2">Inline Elements:</h3>
    <span class="bg-yellow-300 p-2">Inline span 1</span>
    <span class="bg-yellow-300 p-2">Inline span 2</span>
    <span class="bg-yellow-300 p-2">Inline span 3</span>
  </div>
</div>

Flexbox Layout

<div class="bg-gray-100 p-4 border">
  <h3 class="font-semibold mb-3">Flexbox Layout:</h3>
  <div class="flex justify-between items-center bg-white p-3 rounded">
    <div class="bg-blue-500 text-white px-3 py-2 rounded">Item 1</div>
    <div class="bg-green-500 text-white px-3 py-2 rounded">Item 2</div>
    <div class="bg-purple-500 text-white px-3 py-2 rounded">Item 3</div>
  </div>
</div>

Grid Layout

<div class="bg-gray-100 p-4 border">
  <h3 class="font-semibold mb-3">Grid Layout:</h3>
  <div class="grid grid-cols-3 gap-3 bg-white p-3 rounded">
    <div class="bg-red-500 text-white p-3 rounded text-center">Grid Item 1</div>
    <div class="bg-blue-500 text-white p-3 rounded text-center">Grid Item 2</div>
    <div class="bg-green-500 text-white p-3 rounded text-center">Grid Item 3</div>
    <div class="bg-yellow-500 text-white p-3 rounded text-center">Grid Item 4</div>
    <div class="bg-purple-500 text-white p-3 rounded text-center">Grid Item 5</div>
    <div class="bg-pink-500 text-white p-3 rounded text-center">Grid Item 6</div>
  </div>
</div>

Inline-Block Navigation

<div class="bg-gray-100 p-4 border">
  <h3 class="font-semibold mb-3">Inline-Block Navigation:</h3>
  <nav class="bg-white p-3 rounded">
    <a href="#" class="inline-block bg-blue-500 text-white px-4 py-2 rounded mr-2 hover:bg-blue-600">Home</a>
    <a href="#" class="inline-block bg-blue-500 text-white px-4 py-2 rounded mr-2 hover:bg-blue-600">About</a>
    <a href="#" class="inline-block bg-blue-500 text-white px-4 py-2 rounded mr-2 hover:bg-blue-600">Services</a>
    <a href="#" class="inline-block bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Contact</a>
  </nav>
</div>

Browser Support

The display property has excellent browser support:

• Basic values (block, inline, none): Full support in all browsers
• inline-block: Full support in all browsers (IE8+)
• flex: Full support in all browsers (IE10+)
• grid: Full support in all browsers (IE10+)
• table values: Full support in all browsers

Best Practices

1. Semantic HTML: Use appropriate HTML elements rather than changing display properties unnecessarily
2. Layout choice: Choose flexbox for one-dimensional layouts and grid for two-dimensional layouts
3. Performance: Avoid changing display properties frequently as it can trigger layout recalculations
4. Accessibility: Ensure your layout remains accessible regardless of display properties

Common Use Cases

• block: For full-width containers, sections, and major layout elements
• inline: For text-level elements like <span>, <em>, <strong>
• inline-block: For navigation items, buttons, and form elements that need spacing
• flex: For responsive layouts, navigation bars, and card layouts
• grid: For complex page layouts, photo galleries, and dashboard designs
• none: For hiding elements conditionally or for accessibility purposes

Related Properties

• position: Controls positioning behavior
• float: For floating elements (though flexbox and grid are preferred)
• visibility: Alternative to display: none that preserves layout space
• opacity: For making elements transparent while maintaining layout