CSS calc usage - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the width to 100 pixels minus 20 pixels using calc().

CSS

width: calc(100px [1] 20px);

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

A-

B+

C*

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using + instead of - will add the values instead of subtracting.

Using * or / is invalid for length subtraction here.

The calc() function allows you to perform calculations to set CSS property values. Here, subtracting 20px from 100px uses the minus sign -.

2fill in blank

medium

Complete the code to set the height to half of the viewport height using calc().

CSS

height: calc(100vh [1] 2);

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

A/

B-

C*

D+

Attempts:

3 left

💡 Hint

Common Mistakes

Using * will multiply instead of dividing.

Using + or - will not give half the height.

To get half the viewport height, divide 100vh by 2 using the division operator / inside calc().

3fill in blank

hard

Fix the error in the code to correctly calculate width as 50% minus 10 pixels.

CSS

width: calc(50% [1] 10px);

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

A/

B+

C*

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using + will add 10px instead of subtracting.

Using * or / with different units can cause errors.

The correct operator to subtract 10 pixels from 50% is the minus sign -. Using other operators causes wrong results or errors.

4fill in blank

hard

Fill both blanks to set margin to 10 pixels plus 5% using calc().

CSS

margin: calc([1] [2] 5%);

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

A10px

B+

C-

D20px

Attempts:

3 left

💡 Hint

Common Mistakes

Using subtraction instead of addition.

Using wrong units like 20px instead of 10px.

The margin is calculated by adding 10 pixels and 5%. So the first blank is 10px and the operator is +.

5fill in blank

hard

Fill all three blanks to create a padding that is 5 pixels plus 2 times 3 pixels using calc().

CSS

padding: calc([1] [2] [3]);

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

A5px

B+

C2 * 3px

D6px

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to write the multiplication outside calc().

Using 6px directly instead of 2 * 3px.

The padding is calculated as 5 pixels plus 2 times 3 pixels. So the first blank is 5px, the operator is +, and the last part is 2 * 3px.