Common box model issues in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

CSS

box-sizing: [1];

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

Acontent-box

Bpadding-box

Cborder-box

Dmargin-box

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing content-box causes padding and border to add to the element size.

Using padding-box or margin-box are invalid values.

Using border-box makes the element's width and height include padding and border, preventing unexpected size increases.

2fill in blank

medium

Complete the CSS rule to add padding of 1rem inside the box.

CSS

padding: [1];

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

A1rem

B1px

C10%

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using auto for padding is invalid.

Using 1px might be too small on some screens.

Using 1rem sets padding relative to the root font size, which is a good practice for responsive design.

3fill in blank

hard

Fix the error in the CSS to correctly set the border width to 2 pixels.

CSS

border-width: [1];

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

A2px

Btwo

Cpx2

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting units causes the property to be ignored.

Writing units before numbers is invalid.

CSS length values require units like px. Just '2' is invalid.

4fill in blank

hard

Fill both blanks to create a box with 10px padding and a 1rem solid black border.

CSS

padding: [1]; border: [2] solid black;

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

A10px

B2rem

C1rem

Dsolid

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'solid' as padding or border width is incorrect.

Mixing units inconsistently can cause layout issues.

Padding is set to 10px and border width to 1rem with solid style and black color.

5fill in blank

hard

Fill all three blanks to create a responsive box with border-box sizing, 1rem padding, and a 3px dashed red border.

CSS

box-sizing: [1]; padding: [2]; border: [3] dashed red;

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

Acontent-box

B1rem

C3px

Dborder-box

Attempts:

3 left

💡 Hint

Common Mistakes

Using content-box causes size issues with padding and border.

Omitting units for padding or border width breaks the style.

This sets the box model to border-box, padding to 1rem, and border width to 3px with dashed style and red color.