CSS 'display': How Elements Occupy Space

Why it exists

By default, HTML elements have a specific way of occupying space—a takes a full line, while a sits within one. To build any non-trivial layout, we need to override these defaults. The display property is the primary tool for controlling an element's basic layout behavior.

The mental model

The display property sets two things: an element's outer type and its inner type. The outer type defines how the element interacts with its siblings: does it create a line break (block) or sit alongside them (inline)? The inner type defines how its own children are arranged, for example, using normal flow, a flexbox context, or a grid.

How it works

Different values for display produce distinct behaviors. The most common are: block: The element takes up the full width available to it and starts on a new line. You can set width and height. Examples: div, p, h1. inline: The element takes up only as much width as its content requires and flows with surrounding text. It ignores width, height, and vertical margin/padding. Examples: span, a, strong. inline-block: A hybrid. It flows alongside other elements like an inline element, but you can control its width, height, and margin like a block element. none: The element is completely removed from the document flow. It takes up no space and is not rendered. This is different from visibility: hidden, which just makes the element invisible but preserves its space. flex and grid: These values turn the element into a container, establishing a new layout context for its direct children. This unlocks powerful alignment and distribution capabilities defined in the Flexbox and Grid specifications.

When to use it

Use display to alter the default rendering of an element for layout purposes. For example, changing <li> elements from block to inline-block or flex items to create a horizontal navigation bar. It's fundamental for building component layouts and controlling visibility with display: none.

When not to use it

Avoid using display: none to hide content that should be accessible to screen readers. For that, use a dedicated 'visually-hidden' class that moves the content off-screen. Also, avoid legacy values like display: table for main page layout; Flexbox and Grid are the modern standards.

One canonical example

A classic task is creating a horizontal navigation menu from a list. An unordered list <ul> with list items <li> will stack vertically by default because <li> is display: block. By setting display: flex on the parent <ul>, the child <li> elements will automatically align horizontally, forming a navigation bar.