The CSS Box Model: Padding, Border, Margin, Units and Display

Lesson 1

Padding, border and margin

Every element is a box. Here’s what it’s made of.

Every element is a box

The browser draws every element as a rectangle with four layers, from the inside out:

content: the text or picture itself

padding: space inside the box, between the content and the border

border: a line around the box

margin: space outside the box, pushing other boxes away

Padding takes the box’s background color; margin is always see-through.

CSS

.card {
  background-color: #E1EAFE;
  padding: 16px;
  border: 3px solid #2965F1;
  margin: 20px;
}

One side, or all four

padding: 10px; is the same on all four sides

padding: 10px 20px; is 10px top and bottom, 20px left and right

padding-left: 30px; sets just one side (there’s -top, -right, -bottom too)

Margin works exactly the same way. And border takes three things: a width, a style (solid, dashed, dotted) and a color. border-radius: 12px; rounds the corners.

Practise “Padding, border and margin” in the game

Lesson 2

Sizes and units

width, height, px, %, rem and box-sizing.

How big is a box?

width and height set the size of a box. The units matter:

px: pixels, a fixed size

%: a share of the box it’s inside: width: 50% is half its parent

rem: a multiple of the page’s font size (usually 16px), so 2rem is 32px. Good for text and spacing, because it grows when someone makes their text bigger

max-width: 600px; lets a box shrink on small screens but never grow wider than 600px.

CSS

.half {
  width: 50%;
}
.box {
  max-width: 300px;
  padding: 1rem;
}

box-sizing: border-box

By default, width is only the content. Add padding: 20px and a 5px border to a width: 200px box, and it’s really 250px wide. Surprise!

box-sizing: border-box; makes width include the padding and border, so a 200px box stays 200px. Most developers put this at the top of every stylesheet:

CSS

* {
  box-sizing: border-box;
}

Tip: * is the universal selector: it picks every element.

Practise “Sizes and units” in the game

Lesson 3

Block, inline and none

How boxes flow, and how to hide one.

Two kinds of box

Block elements (<p>, <h1>, <div>, <li>) start on a new line and stretch across the whole width

Inline elements (<a>, <strong>, <em>, <span>) flow along inside a line of text, and ignore width and height

You can switch: display: block;, display: inline;, or display: inline-block; (flows like text, but takes width, height and padding properly, which is great for buttons).

display: none; hides an element completely, as if it wasn’t there.

CSS

a.button {
  display: inline-block;
  padding: 8px 16px;
  background-color: #2965F1;
  color: white;
}
.secret {
  display: none;
}

Practise “Block, inline and none” in the game

Recap

What Level 3 covers, in a few lines.

Every element is a box. From the inside out: the content, then padding (space inside the border), the border, and margin (space outside, pushing other boxes away).
padding: 10px 20px; is 10px top and bottom, 20px left and right. border: 2px solid navy; is width, style and color.
With box-sizing: border-box, width includes the padding and border, which makes sizes much easier to plan.
Units: px are fixed; % is a share of the parent; rem is a multiple of the page’s font size.
display: block boxes start on a new line and fill the width. inline ones flow inside text. none hides an element completely.

Now try it in CSS School

Write real code and watch your page change as you type, with a check after every step and a test at the end of each level. Free.

Start learning