Display Property

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Learn to change how elements behave in a layout

display property decides how an element behaves on the page. block takes up the whole line. inline only takes up as much room as its content needs. inline-block sits side-by-side like inline, but lets you set width/height. flex and grid are the main weapons of modern layouts.

css

.nav-link {
  display: inline-block;
  padding: 10px 14px;
}

.card-list {
  display: flex;
  gap: 16px;
}

You should see

Navigation links will be able to have padding set on them. The card list becomes a flex layout with gaps between the cards.

Tip

display: none; removes an element from the layout entirely, including for screen readers. If you just want to hide it visually, consider visibility instead.