CSS Display Property

Control how elements participate in layout with display: block, inline, inline-block, none, flex, and grid.

Overview

The `display` property is one of the most important in CSS. It determines how an element participates in the layout flow and how its children are arranged. The most common values: - `block` starts on a new line, takes full available width (div, p, h1, section by default) - `inline` flows with text, no line break, ignores width/height (span, a, strong by default) - `inline-block` flows inline but accepts width, height, margin, and padding - `none` removes the element from the layout completely (invisible and takes no space) - `flex` turns the element into a flex container for powerful one-dimensional layout - `grid` turns the element into a grid container for two-dimensional layout Understanding the difference between block, inline, and inline-block is essential before moving to flexbox and grid.

Key Points

•block: full-width box, starts new line, accepts width/height/margin/padding
•inline: flows in text, no new line, width/height ignored
•inline-block: flows inline but respects all box model properties
•display: none removes element from layout (vs. visibility: hidden which hides but keeps space)
•flex and grid are display values that create powerful layout contexts
•Every HTML element has a default display value set by the browser

Examples

Block vs inline vs inline-block

/* Block takes full width, new line */
div {
  display: block;
  width: 200px;    /* works */
}

/* Inline flows with text, width ignored */
span {
  display: inline;
  width: 200px;    /* ignored */
}

/* Inline-block best of both: flows inline but respects width */
.badge {
  display: inline-block;
  width: 60px;
  height: 24px;
  text-align: center;
}

Hiding elements

/* display: none removed from layout, no space taken */
.hidden {
  display: none;
}

/* visibility: hidden still takes space, just invisible */
.invisible {
  visibility: hidden;
}

Use display:none to truly remove an element; visibility:hidden to hide but keep the space.

Converting inline elements to inline-block for spacing

/* Links in nav: make them behave like buttons */
nav a {
  display: inline-block;
  padding: 8px 16px;    /* padding now works! */
  margin-right: 8px;
  border-radius: 4px;
}

Common Mistakes

Setting width on an inline element and wondering why it has no effect
Confusing display:none (no space) with visibility:hidden (keeps space)
Forgetting that changing display to inline-block on a block element makes it only as wide as its content

Note

When you need to add padding or dimensions to a link or span, change it to display: inline-block. That is the quickest fix for "padding is not working on this span."

CSS Display Property

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

Why does setting width on a <span> element have no effect by default?