The CSS Box Model

Every element is a box. Learn how its size really works.

Lesson 14 of 49Beginner13 min read

This is the single most important idea in CSS layout: every element is a rectangular box. Headings, paragraphs, images and links are all boxes, even when they don't look like it. Once you understand the four layers of that box, spacing and sizing stop being mysterious.

Most layout problems beginners run into, such as an element that is wider than expected, a gap that won't go away, or text spilling out of a card, come down to the box model. This lesson gives you the mental picture you'll use in every layout you build.

The four layers of the box model

From the inside out:

  1. Content is the text or image itself. You size it with width and height.
  2. Padding is space inside the box, between the content and the border. It takes on the element's background colour.
  3. Border is the line around the padding.
  4. Margin is space outside the border, pushing other boxes away. It's always transparent.

Open your browser's DevTools (F12), select any element and look for the box model diagram. It shows these four layers with their exact sizes, which is the quickest way to see why an element is the size it is.

Why elements end up wider than you expect

By default, width sets only the content width. Padding and border are added on top:

Text
width: 200px + padding: 20px (×2) + border: 5px (×2) = 250px wide!

That's confusing, so almost every modern stylesheet starts with this rule:

CSS
*, *::before, *::after { box-sizing: border-box; }

With border-box, width: 200px means the whole box is 200px wide, and the padding and border fit inside. This makes sizes predictable, especially when you mix percentages with padding.

Sizing helpers and overflow

  • max-width: 600px keeps an element from growing wider than 600px while letting it shrink. Combine it with width: 100% for boxes that fit any screen.
  • min-height: 200px makes an element at least 200px tall while letting it grow with its content.
  • overflow decides what happens when content is too big for the box: visible (the default), hidden, scroll, or auto, which shows scrollbars only when needed.
  • aspect-ratio: 16 / 9 keeps a shape in proportion as the width changes.

Prefer min-height to a fixed height for anything containing text. A fixed height looks fine with your sample text, then overflows when real content or a larger font size arrives.

CSS Box Model Syntax

Box model properties

.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 4px solid;
  margin: 16px;
}

CSS Box Model Summary

  • Every element is a box made of content, padding, border and margin.
  • Padding is inside the border and shows the background; margin is outside and transparent.
  • By default, padding and border are added to the width you set.
  • box-sizing: border-box makes width include padding and border.
  • Use max-width, min-height and overflow to keep boxes flexible.

CSS Box Model Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

See every layer

The browser DevTools (F12) show exactly this diagram when you inspect an element.

.box {
  width: 200px;
  padding: 20px;
  border: 6px solid #4467ff;
  margin: 24px;
  background: #e1e6ff;
  font-family: sans-serif;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2The content area is 200px wide.
  2. Line 320px of padding inside. Notice the background fills it.
  3. Line 4A 6px border around the padding.
  4. Line 524px of empty space outside, on every side.
  5. Lines 2 to 4Total visible width: 200 + 20 + 20 + 6 + 6 = 252px.
Example 2

content-box vs border-box

Both boxes say width: 200px. Only one is actually 200px wide.

.a, .b {
  width: 200px;
  padding: 20px;
  border: 5px solid #15161b;
  margin-bottom: 8px;
  font-family: sans-serif;
}

.a { box-sizing: content-box; background: #ffe3d7; }
.b { box-sizing: border-box; background: #d6f4e4; }

.ruler { width: 200px; background: #15161b; color: white; font: 12px monospace; }
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 2 to 4Same width, padding and border on both.
  2. Line 9content-box: 200 + 40 + 10 = 250px wide.
  3. Line 10border-box makes it exactly 200px, with padding and border squeezed inside.
Example 3

Overflow and aspect ratio

.scroll {
  height: 80px;
  overflow: auto;
  border: 2px dashed #f0592b;
  padding: 8px;
}

.video {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 16 / 9;
  margin-top: 12px;
  display: grid;
  place-items: center;
  background: #15161b;
  color: white;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 2 to 3Fixed height + overflow: auto = scroll inside the box when needed.
  2. Line 11The box always keeps a 16:9 shape, like a video.

Common CSS Box Model Mistakes

width: 100% plus padding

Don't
.input { width: 100%; padding: 12px; }
/* overflows its parent by 24px */
Do
* { box-sizing: border-box; }
.input { width: 100%; padding: 12px; }

With the default content-box, 100% + padding is wider than the parent. border-box fixes it.

Fixed heights on text boxes

Don't
.card { height: 150px; }
Do
.card { min-height: 150px; }

Text grows (translations, bigger fonts, zoom). A fixed height makes it overflow; min-height lets the box grow.

CSS Box Model in Real Projects

The universal reset

Open the CSS of almost any modern website or framework (Bootstrap, Tailwind, this site) and near the top you'll find box-sizing: border-box applied to everything. It's that important.

CSS Box Model Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Make width include padding and border.

* {
  : ;
}
Multiple choiceeasy

Which layer of the box model is always transparent?

Predict the outputmedium

With the default content-box, how wide does this box appear?

.box { width: 100px; padding: 10px; border: 2px solid; }
Fix the bugmedium

The search input overflows its 300px container. Make it fit exactly without removing the padding or border.

.search {
  width: 100%;
  padding: 12px;
  border: 2px solid #15161b;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The input is exactly 300px wide
  • Padding is still 12px

CSS Box Model Quiz

3 questions to check what you learned.

  1. What's the order of the box model layers from inside out?

    • margin, border, padding, content
    • content, padding, border, margin
    • content, margin, border, padding
    • padding, content, border, margin

  2. Which overflow value adds scrollbars only when needed?

    • auto
    • scroll
    • hidden
    • visible

  3. Does a background colour fill the padding area?

    • No, only the content
    • Only with border-box
    • Yes
    • Only with overflow: hidden

CSS Box Model Challenge

A perfectly sized card

Make .card:

  1. Use box-sizing: border-box
  2. Exactly 260px wide in total, with 24px padding and a 3px border
  3. At least 140px tall (use min-height)
  4. Have 20px of margin below it
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Total width is 260px
  • Uses border-box
  • Padding is 24px
  • Border is 3px
  • At least 140px tall
  • 20px margin below

Related CSS topics

15Margin & PaddingSpace inside and outside elements, shorthands and centring.08Borders & RadiusBorders, rounded corners, circles, pills and outlines.16DisplayControl how a box behaves: block, inline, inline-block, none, flex, grid.
Esc
↑↓ to navigateEnter to open