×

css · level 1 · unit 5 · lesson 2

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

Every element is a box, and adds room inside.

The browser draws every element as a box. The names its layers, like an onion: content in the middle, then padding, then a border, then a margin on the outside.

Padding is the space between the content and the edge of the box. The background fills it, so padding makes a coloured box look roomy instead of cramped.

padding: 20px adds room on all four sides. padding-top, padding-right, padding-bottom and padding-left set one side each.

<div class="note">Back in 5 minutes</div>
.note {
  background-color: khaki;
  padding: 20px;
}

Press show my page to see it here.

<div> is a plain box with no look of its own, handy for grouping things.