LESSON 15

Display

Learning objective: Control layout flow with the display property.

Understand

The display property decides how an element flows.

block elements stack and take full width; inline elements sit in a line and ignore width; inline-block flows inline but accepts width and height; none hides an element entirely. Understanding display is the key to layout.

Analogy: Block is like stacked shelves, inline is like words in a sentence, and none is invisible.

See It in Action

Switching an element's display:

nav a {
  display: inline-block;
  padding: 8px 12px;
}
How it works: Making links inline-block lets them sit side by side while still accepting padding for a clickable area.

Try It Yourself

  1. Set a span to display: block.
  2. Set a div to display: inline.
  3. Hide an element with display: none.

Quick Quiz

Which display value hides an element completely?

Challenge

Turn a list of links into a horizontal row using display.

Success condition: Your links sit in a row and each has clickable padding.