Display

`display` determines an element's outer behavior (block / inline) and inner formatting (flex / grid / flow).

4 min read Level 2/5 #css#display#layout

What you'll learn

Tell block from inline
Use `display: none` vs `visibility: hidden`
Switch to flex or grid

display is the single most important layout property. It determines how an element participates in its parent’s flow and how its own children are laid out.

The Common Values

Value	Behavior
`block`	Full width line, stacks vertically (`<div>`, `<p>`, `<h1>`)
`inline`	Flows with text, ignores `width`/`height` (`<span>`, `<a>`)
`inline-block`	Flows inline BUT respects sizing
`flex`	Children become flex items
`grid`	Children become grid items
`none`	Element is removed from layout entirely
`contents`	Element’s children “promote up” to its parent

Block vs Inline

.block-thing  { display: block;  }  /* takes a full line */
.inline-thing { display: inline; }  /* flows in text */

Default per element:

<div>, <p>, <h1>–<h6>, <section>, <article> — block
<span>, <a>, <strong>, <em>, <img> — inline (<img> is inline-block under the hood)

Inline-Block — Best of Both

Sometimes you want inline placement but want to set width / height:

.badge {
  display: inline-block;
  width: 60px;
  text-align: center;
}

Mostly superseded by flex/grid, but still useful.

`display: none` vs `visibility: hidden`

Value	Visible?	Takes space?	In tab order?
`display: none`	No	No	No
`visibility: hidden`	No	Yes	No
`opacity: 0`	No	Yes	Yes (still focusable)
`aria-hidden="true"`	Yes	Yes	Yes (but hidden from screen readers)

display: none is the heaviest — the element is gone. Use it to truly remove things. For animation, you usually want opacity combined with pointer-events: none.

`display: flex` / `display: grid`

The two superpowers. Both turn the CONTAINER into a flex/grid box; the CHILDREN become items that respect the parent’s layout rules.

.nav    { display: flex; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

The next two lessons go deep on each.

`display: contents`

An odd one — the element itself disappears from layout, but its children stay:

.semantic-wrapper { display: contents; }

Useful for keeping a semantic wrapper without it affecting flex / grid layout. (Accessibility caveat: in some browsers, display: contents removes the element from the accessibility tree. Test before relying on it.)

Up Next

Flexbox — the easiest way to lay things out in a row or column.

Flexbox Intro →