← HTML & CSS

box-sizing

Controls whether width and height include padding and border. border-box includes them; content-box (the default) measures content only.

Part of: HTML and CSS Journey — Module 48

Understanding box-sizing in HTML & CSS

What it does: The * universal selector targets all elements, making border-box the base sizing model. Browsers default to content-box, so padding and border expand the element beyond its declared width. CSS values use hyphens, not underscores. border_box is not a recognised value. The property is box-sizing (with an 'i'). box-sizng is not a valid CSS property.

Common mistakes: box-sizing is a CSS property, not a class name. The selector .box-sizing targets elements with class='box-sizing'. To apply box-sizing to all elements use * {} or target the correct selector. The property name is misspelled. It should be box-sizing: border-box; not box-sizng: border-box;.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add box-sizing to a class →

This module's key terms are also in a printable crossword (Modules 43–52) and word search (Modules 43–63).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
With border-box, if width is 200px and padding is 20px, what is the total rendered width?
200px240px
Matches
box-sizng: border-box;
↓
Misspelled property — should be box-sizing: border-box;
Applying
Meanings
Term
box-sizing
Meaning
Controls whether width and height include padding and border. border-box includes them; content-box (the default) measures content only.
Practice
* {
Testing
Gaps
box-sizing: ;
Check Answer
Spots
1.box-sizing {
2 width: 100px;

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Butterfly' badge — Branch Hopper, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. With border-box, if width is 200px and padding is 20px, what is the total rendered width?
A. 240px
B. 200px ✓
border-box includes padding (and border) inside the declared width, so the element stays 200px wide.
2. With content-box, if width is 200px and padding is 20px, what is the total rendered width?
A. 240px ✓
B. 200px
content-box adds padding on top of the width, so 200 + 20 + 20 = 240px total.
3. Which is the default value of box-sizing?
A. content-box ✓
B. border-box
Browsers use content-box by default. border-box must be set explicitly.
4. Which selector applies box-sizing to every element on the page?
A. * { box-sizing: border-box; } ✓
B. body { box-sizing: border-box; }
The * universal selector targets all elements. body only targets the body element itself, not its children.
5. Does border-box include margin in the declared width?
A. Yes — margin is included
B. No — margin is always outside ✓
border-box includes padding and border, but margin always sits outside the element's box.

Match the Pairs

box-sizing: border-box; → Width includes padding and border — element stays its declared size
box-sizing: content-box; → Width applies to content only — padding and border add to the total
Apply border-box to every element as a global reset → * { box-sizing: border-box; }
The default box-sizing value used by browsers → content-box
box-sizng: border-box; → Misspelled property — should be box-sizing: border-box;
box-sizing: border_box; → Wrong syntax — CSS values use hyphens: border-box not border_box

Key Term

box-sizing
Controls whether width and height include padding and border. border-box includes them; content-box (the default) measures content only.

Fill in the Blanks

1. * { box-sizing: border-box; }
Hint: Type the box-sizing value that includes padding and border inside the width
2. div { box-sizing: content-box; }
Hint: Type the CSS property that controls how width and height are calculated
3. p { box-sizing: content-box; }
Hint: Type the box-sizing value that measures the content area only, excluding padding and border
4. div { box-sizing: border-box; width: 200px; }
Hint: Type the value that makes the 200px width include any padding and border
5. div { box-sizing: border-box; width: 300px; }
Hint: Type the property that sets the total horizontal size of the element

Spot the Error

Question 1
A .box-sizing {
B width: 100px;
C padding: 10px;
Line A — box-sizing is a CSS property, not a class name. The selector .box-sizing targets elements with class='box-sizing'. To apply box-sizing to all elements use * {} or target the correct selector.
Question 2
A div {
B box-sizng: border-box;
C width: 200px;
Line B — The property name is misspelled. It should be box-sizing: border-box; not box-sizng: border-box;
Question 3
A * {
B padding: 0;
C box-sizing: content_box;
Line C — CSS values use hyphens, not underscores. It should be box-sizing: content-box; not box-sizing: content_box;
Question 4
A div {
B box-sizing: border-box;
C width: 250px;
D padding: 20px
Line D — The declaration is missing a semicolon at the end. It should be padding: 20px; not padding: 20px
Question 5
A section {
B box-sizing: border-box;
C width: 100%;
D padding: 16px;
E border: 1px solid gray
Line E — The last declaration is missing a semicolon. It should be border: 1px solid gray; not border: 1px solid gray

Student with a class code? Join your class →