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.

Practice

1. What does the CSS calc() function allow you to do?

easy

A. Add comments inside CSS files

B. Create animations with keyframes

C. Select elements based on their attributes

D. Perform mathematical calculations to combine different units in CSS values

Solution

1. Step 1: Understand the purpose of calc()

   The calc() function is designed to perform math operations like addition, subtraction, multiplication, and division inside CSS property values.

2. Step 2: Compare with other CSS features

   Other options like animations, selectors, and comments do not involve calculations or mixing units.

3. Final Answer:

   Perform mathematical calculations to combine different units in CSS values -> Option D

4. Quick Check:

   CSS calc() = math with units [OK]

Hint: Remember calc() is for math in CSS values [OK]

Common Mistakes:

• Thinking calc() creates animations
• Confusing calc() with selectors or comments
• Using calc() without spaces around operators

2. Which of the following is the correct syntax for using calc() in CSS?

easy

A. width: calc(100% + 50px);

B. width: calc(100%+ 50px);

C. width: calc(100%+50px);

D. width: calc(100% +50px);

Solution

1. Step 1: Check spacing rules in calc()

   CSS requires spaces around operators (+, -, *, /) inside calc() for correct parsing.

2. Step 2: Identify the option with proper spaces

   width: calc(100% + 50px); has spaces on both sides of the plus sign, making it valid syntax.

3. Final Answer:

   width: calc(100% + 50px); -> Option A

4. Quick Check:

   Spaces around operators = correct syntax [OK]

Hint: Always add spaces around operators in calc() [OK]

Common Mistakes:

• Omitting spaces around + or -
• Using commas instead of spaces
• Putting spaces inside unit values

3. What will be the computed width of this element if the viewport width is 800px?

div {
  width: calc(50% - 100px);
}

medium

A. 700px

B. 400px

C. 300px

D. 500px

Solution

1. Step 1: Calculate 50% of viewport width

   50% of 800px is 400px.

2. Step 2: Subtract 100px from 400px

   400px - 100px equals 300px.

3. Final Answer:

   300px -> Option C

4. Quick Check:

   50% of 800px minus 100px = 300px [OK]

Hint: Calculate percentages first, then add/subtract fixed units [OK]

Common Mistakes:

• Subtracting before calculating percentage
• Confusing 50% with 100px
• Forgetting to convert percentage to pixels

4. Identify the error in this CSS snippet:

p {
  margin-left: calc(20px+10%);
}

medium

A. Missing units for 20 and 10

B. No spaces around the plus operator inside calc()

C. calc() cannot mix px and % units

D. margin-left property cannot use calc()

Solution

1. Step 1: Check spacing around operators in calc()

   The plus sign (+) inside calc() must have spaces on both sides to be valid.

2. Step 2: Verify units and property usage

   Both 20px and 10% have units, and margin-left supports calc(), so no error there.

3. Final Answer:

   No spaces around the plus operator inside calc() -> Option B

4. Quick Check:

   Spaces around operators = required [OK]

Hint: Check spaces around +, -, *, / in calc() [OK]

Common Mistakes:

• Ignoring spaces around operators
• Thinking calc() can't mix units
• Assuming margin-left disallows calc()

5. You want a box to be 100px wide plus 10% of the viewport width, but never wider than 200px. Which CSS rule correctly uses calc() and limits the width?

hard

A. width: calc(100px + 10%); max-width: 200px;

B. width: calc(100px + 10% max-width: 200px);

C. width: calc(100px + 10%); max-width: calc(200px);

D. width: calc(100px + 10% - 200px);

Solution

1. Step 1: Use calc() to add fixed and relative units

   width: calc(100px + 10%); max-width: 200px; correctly uses calc(100px + 10%) to combine fixed and percentage widths.

2. Step 2: Limit width with max-width property

   width: calc(100px + 10%); max-width: 200px; sets max-width: 200px; separately, which correctly limits the maximum width.

3. Final Answer:

   width: calc(100px + 10%); max-width: 200px; -> Option A

4. Quick Check:

   Separate max-width limits width correctly [OK]

Hint: Use max-width separately to limit calc() results [OK]

Common Mistakes:

• Combining max-width inside calc()
• Missing semicolon between properties
• Subtracting max width instead of limiting