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.