← 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

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 journey and assign it to your class.

🖨 Print Worksheet and Answer key of box-sizing (PDF)

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.

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.

Teach this with your class →

Quick Questions

1. With border-box, if width is 200px and padding is 20px, what is the total rendered width?

A. 200px ✓

B. 240px

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. No — margin is always outside ✓

B. Yes — margin is included

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

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?