box-sizing

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

A 240px

B 200px

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

A 240px

B 200px

3. Which is the default value of box-sizing?

A content-box

B border-box

4. Which selector applies box-sizing to every element on the page?

A * { box-sizing: border-box; }

B body { box-sizing: border-box; }

5. Does border-box include margin in the declared width?

A Yes — margin is included

B No — margin is always outside

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1box-sizing: border-box;		AWrong syntax — CSS values use hyphens: border-box not border_box
2box-sizing: content-box;		B* { box-sizing: border-box; }
3Apply border-box to every element as a global reset		CMisspelled property — should be box-sizing: border-box;
4The default box-sizing value used by browsers		DWidth applies to content only — padding and border add to the total
5box-sizng: border-box;		EWidth includes padding and border — element stays its declared size
6box-sizing: border_box;		Fcontent-box

Definitions

box-sizing

Fill in the Blanks

Complete each line of code by filling in the missing parts.

* { box-sizing: __________; }

div { __________: content-box; }

p { box-sizing: ___________; }

div { box-sizing: __________; width: 200px; }

div { box-sizing: border-box; _____: 300px; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A .box-sizing {

B width: 100px;

C padding: 10px;

Question 2

A div {

B box-sizng: border-box;

C width: 200px;

Question 3

A * {

B padding: 0;

C box-sizing: content_box;

Question 4

A div {

B box-sizing: border-box;

C width: 250px;

D padding: 20px

Question 5

A section {

B box-sizing: border-box;

C width: 100%;

D padding: 16px;

E border: 1px solid gray

Answer Key

box-sizing

Section A: Quick Questions

B — 200px

A — 240px

A — content-box

A — * { box-sizing: border-box; }

B — No — margin is always outside

Section B: 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

Section C: Definitions

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

Section D: Fill in the Blanks

* {
  box-sizing: border-box;
}

div {
  box-sizing: content-box;
}

p {
  box-sizing: content-box;
}

div {
  box-sizing: border-box;
  width: 200px;
}

div {
  box-sizing: border-box;
  width: 300px;
}

Section E: Spot the Error

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.

B — The property name is misspelled. It should be box-sizing: border-box; not box-sizng: border-box;

C — CSS values use hyphens, not underscores. It should be box-sizing: content-box; not box-sizing: content_box;

D — The declaration is missing a semicolon at the end. It should be padding: 20px; not padding: 20px

E — The last declaration is missing a semicolon. It should be border: 1px solid gray; not border: 1px solid gray