Box sizing in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the box sizing to include padding and border in the element's total width and height.

CSS

div {
  box-sizing: [1];
}

Drag options to blanks, or click blank then click option'

Amargin-box

Bcontent-box

Cpadding-box

Dborder-box

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing content-box which excludes padding and border

Using non-existent values like margin-box

The border-box value makes the element's width and height include padding and border, so the total size stays as you set it.

2fill in blank

medium

Complete the code to apply the box-sizing rule to all elements on the page.

CSS

* {
  box-sizing: [1];
}

Drag options to blanks, or click blank then click option'

Acontent-box

Bborder-box

Cpadding-box

Dinherit

Attempts:

3 left

💡 Hint

Common Mistakes

Using content-box which excludes padding and border

Using inherit which depends on parent styles

Using border-box on all elements makes layout easier by including padding and border in size calculations.

3fill in blank

hard

Fix the error in the box-sizing property value to correctly include padding and border.

CSS

section {
  box-sizing: [1];
}

Drag options to blanks, or click blank then click option'

Aborderbox

Bcontentbox

Cborder-box

Dcontent-box

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the hyphen in border-box

Using contentbox instead of content-box

The correct value is border-box with a hyphen. Misspelling it causes the property to be ignored.

4fill in blank

hard

Fill both blanks to create a CSS rule that sets box-sizing to border-box and adds a 10px padding.

CSS

div.container {
  box-sizing: [1];
  padding: [2];
}

Drag options to blanks, or click blank then click option'

Aborder-box

Bcontent-box

C10px

D5px

Attempts:

3 left

💡 Hint

Common Mistakes

Using content-box which excludes padding

Setting padding to 5px instead of 10px

Setting box-sizing to border-box includes padding in the element's size. Padding is set to 10px for spacing inside the box.

5fill in blank

hard

Fill all three blanks to create a CSS rule that sets box-sizing to border-box, width to 200px, and border to 2px solid black.

CSS

.box {
  box-sizing: [1];
  width: [2];
  border: [3];
}

Drag options to blanks, or click blank then click option'

Acontent-box

B200px

C2px solid black

Dborder-box

Attempts:

3 left

💡 Hint

Common Mistakes

Using content-box instead of border-box

Omitting units like px in width or border

Incorrect border syntax

This rule sets the box-sizing to border-box so the width includes border and padding. The width is 200px, and the border is 2px solid black.

Practice

1. What does the CSS property box-sizing: border-box; do?

easy

A. Removes padding and border from the element.

B. Adds padding and border outside the element's width and height.

C. Sets the element's width and height to auto.

D. Includes padding and border inside the element's width and height.

Solution

1. Step 1: Understand box-sizing options

   The content-box model adds padding and border outside the width and height, while border-box includes them inside.

2. Step 2: Apply to border-box

   Using box-sizing: border-box; means the total size includes padding and border, making layout easier.

3. Final Answer:

   Includes padding and border inside the element's width and height. -> Option D

4. Quick Check:

   box-sizing: border-box = padding and border inside [OK]

Hint: Remember border-box keeps size fixed including padding and border [OK]

Common Mistakes:

• Confusing border-box with content-box behavior
• Thinking padding is always outside size
• Ignoring border width in calculations

2. Which of the following is the correct CSS syntax to set box sizing to include padding and border inside the element's size?

easy

A. box-sizing: border-box;

B. box-sizing: size-box;

C. box-sizing: padding-box;

D. box-sizing: content-box;

Solution

1. Step 1: Recall valid box-sizing values

   The valid values are content-box and border-box. Others like padding-box or size-box are invalid.

2. Step 2: Identify correct value for including padding and border

   border-box includes padding and border inside the element's size.

3. Final Answer:

   box-sizing: border-box; -> Option A

4. Quick Check:

   Correct syntax for including padding and border = border-box [OK]

Hint: Only content-box and border-box are valid values [OK]

Common Mistakes:

• Using invalid box-sizing values
• Mixing up content-box and border-box
• Forgetting the colon or semicolon in CSS

3. Given this CSS:

div {
  width: 200px;
  padding: 20px;
  border: 10px solid black;
  box-sizing: content-box;
}

What is the total width of the div element as rendered in the browser?

medium

A. 200px

B. 240px

C. 260px

D. 260px plus margin

Solution

1. Step 1: Calculate width with content-box

   With content-box, width is content only. Padding and border add outside width.
   Width = content width + 2 * padding + 2 * border = 200 + 40 + 20 = 260px.

2. Step 2: Confirm total width

   Total width rendered = 260px (margin not included here).

3. Final Answer:

   260px -> Option C

4. Quick Check:

   content-box width = content + padding + border = 260px [OK]

Hint: Add padding and border twice to content width for content-box [OK]

Common Mistakes:

• Forgetting to double padding and border for both sides
• Confusing content-box with border-box
• Including margin in width calculation

4. You have this CSS:

p {
  width: 150px;
  padding: 15px;
  border: 5px solid blue;
  box-sizing: border-box;
}

But the paragraph is wider than 150px on the page. What is the likely cause?

medium

A. There is extra margin or display property affecting width.

B. The browser does not support box-sizing.

C. Padding and border are added outside width with border-box.

D. Width property is ignored with border-box.

Solution

1. Step 1: Understand border-box behavior

   With border-box, padding and border are inside the width, so total width should be 150px.

2. Step 2: Identify other layout factors

   If the element is wider, likely margin, or display (like inline-block with whitespace) or parent constraints affect size.

3. Final Answer:

   There is extra margin or display property affecting width. -> Option A

4. Quick Check:

   border-box includes padding/border; extra width = margin or display [OK]

Hint: Check margin and display if border-box width seems off [OK]

Common Mistakes:

• Assuming border-box adds padding outside width
• Ignoring margin or inline-block spacing
• Thinking width is ignored with border-box

5. You want a fixed 300px wide button including padding and border. Which CSS will achieve this correctly?

hard

A. button {
width: 300px;
padding: 20px;
border: 5px solid black;
box-sizing: content-box;
}

B. button {
width: 300px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
}

C. button {
width: 270px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
}

D. button {
width: 300px;
padding: 0;
border: 0;
box-sizing: border-box;
}

Solution

1. Step 1: Understand fixed width with padding and border

   To keep total width 300px including padding and border, use box-sizing: border-box;.

2. Step 2: Check options

   button {
     width: 300px;
     padding: 20px;
     border: 5px solid black;
     box-sizing: content-box;
   }

   uses content-box, so total width > 300px.
   

   button {
     width: 300px;
     padding: 20px;
     border: 5px solid black;
     box-sizing: border-box;
   }

   uses border-box with 300px width, so total size is 300px.
   

   button {
     width: 270px;
     padding: 20px;
     border: 5px solid black;
     box-sizing: border-box;
   }

   sets width 270px with border-box, making total smaller than 300px.
   

   button {
     width: 300px;
     padding: 0;
     border: 0;
     box-sizing: border-box;
   }

   removes padding and border, which is not desired.

3. Final Answer:

   Option B CSS code -> Option B

4. Quick Check:

   border-box + width = total fixed size including padding/border [OK]

Hint: Use border-box to keep total width fixed including padding and border [OK]

Common Mistakes:

• Using content-box and expecting fixed total width
• Adjusting width incorrectly with border-box
• Removing padding or border instead of adjusting box-sizing