How does the CSS display property work?

The CSS display property controls two things: how an element participates in the document flow (does it start on a new line or flow inline?) and how its children are laid out (normal flow, flexbox, or grid). It's the most fundamental property for controlling layout behavior in CSS.

Every element in HTML has a default display value. The two most fundamental are block and inline. Understanding the difference between these two is the key to understanding all other display values.

Block elements

A block element takes up the full width available and starts on a new line. Think of blocks as stacking vertically, like paragraphs in a document.

Inline elements

An inline element only takes up as much width as its content needs and flows within the text. Think of inline elements as words in a sentence — they sit next to each other horizontally.

The code below applies the same CSS properties — width, height, margin, and padding — to both a block and an inline element. Notice how the block element respects every property, while the inline element silently ignores width, height, and vertical margin. This is the most common source of confusion when elements don't size the way you expect.

/* Block: full width, new line, respects all box model properties */
.block-element {
  display: block;
  width: 200px;       /* ✅ Works */
  height: 100px;      /* ✅ Works */
  margin-top: 20px;   /* ✅ Works */
  padding: 10px;      /* ✅ Works — pushes content away */
}

/* Inline: flows with text, ignores width/height */
.inline-element {
  display: inline;
  width: 200px;       /* ❌ Ignored completely */
  height: 100px;      /* ❌ Ignored completely */
  margin-top: 20px;   /* ❌ Ignored — no vertical margin */
  margin-left: 10px;  /* ✅ Works — horizontal margin is fine */
  padding: 10px;      /* ⚠️ Applies visually but doesn't push vertically */
}

inline-block combines the flow behavior of inline elements with the sizing capabilities of block elements. The element flows inline (sits next to other elements) but respects width, height, and all margins/padding.

.inline-block-element {
  display: inline-block;
  width: 200px;       /* ✅ Works */
  height: 100px;      /* ✅ Works */
  margin-top: 20px;   /* ✅ Works */
  padding: 10px;      /* ✅ Works — pushes content away properly */
}

/* Common use case: navigation links with padding */
.nav-link {
  display: inline-block;
  padding: 12px 24px;  /* Vertical padding actually works now */
  margin: 0 4px;
}

Before flexbox existed, inline-block was the primary way to create horizontal layouts. It's still useful when you need sized elements that flow with text.

Both display: none and visibility: hidden make an element invisible, but they have a crucial difference in how they affect layout. With display: none, the element is completely removed from the document flow — other elements collapse into the space it occupied. With visibility: hidden, the element is invisible but still takes up its full space, leaving a visible gap.

/* display: none — completely removed from layout */
.hidden {
  display: none;
  /* As if the element doesn't exist:
   * - Takes up zero space
   * - Surrounding elements fill the gap
   * - Removed from accessibility tree */
}

/* visibility: hidden — invisible but still occupies space */
.invisible {
  visibility: hidden;
  /* The element is still "there":
   * - Takes up its normal space (leaves a gap)
   * - Surrounding elements don't move
   * - Can be transitioned */
}

display: flex and display: grid work differently from the values we've seen so far. Instead of changing how the element itself flows in the document, they change how the element's children are laid out. The element itself remains a block-level box, but its children become flex items or grid items with entirely new layout rules. Notice in the code below how inline-flex exists for when you want the container itself to flow inline.

/* Flexbox: one-dimensional layout (row OR column) */
.nav {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

/* Grid: two-dimensional layout (rows AND columns) */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* Key insight: display: flex makes CHILDREN flex items.
   The element itself is still a block-level box.
   If you want the container to flow inline, use inline-flex. */
.inline-nav {
  display: inline-flex;
}

An important subtlety: setting display: flex or display: grid on a parent changes how its children behave, regardless of the children's own display values. A <span> inside a flex container becomes a flex item and can suddenly have width, height, and margins.

The display property is foundational to CSS layout. Interviewers ask this to check whether you understand how elements flow in a document, why certain sizing properties get ignored on inline elements, the difference between hiding with none vs visibility: hidden, and when to reach for flex vs grid. It's a quick way to gauge your CSS fundamentals.