Display

The display Property

display decides how an element behaves as a box. It's the foundation of layout!

block

Takes a full line, full width, stacked:

div {
  display: block;
}

Default for: div, p, h1, section...

inline

Sits within a line, takes only needed width:

span {
  display: inline;
}

Default for: span, a, strong, b, i, img (replaced)...

Inline cannot set width/height, margin-top/bottom.

inline-block

The best of both worlds! Sits inline AND allows width/height/margins:

.box {
  display: inline-block;
  width: 150px;
  height: 100px;
}

Three mini-columns in a row, each with size. Great for nav elements and small grids.

none

Removes the element from the layout completely:

.hidden {
  display: none;
}

Unlike visibility: hidden (keeps space), none takes zero space.

Why it matters

Almost all layout systems (flex/grid) start by changing display! Understanding block/inline/inline-block is the door to the rest.

TL;DR

• block: full width, stacked.
• inline: flows with text, no width/height.
• inline-block: inline position, block sizing.
• none: removes the element entirely.
• Layout tricks begin here!