Bird
Raised Fist0
CSSmarkup~5 mins

CSS calc usage

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction
CSS calc lets you do math inside your styles to mix different units and create flexible layouts.
When you want to set a width that is 100% of the container minus some fixed pixels.
When you need to combine percentages and pixels for padding or margin.
When you want to adjust font size based on viewport width minus a fixed size.
When you want to create responsive spacing that adapts but keeps some fixed gap.
Syntax
CSS
property: calc(expression);
The expression can use +, -, *, and / with spaces around operators.
You can mix units like %, px, em, rem inside calc.
Examples
Sets width to full container width minus 50 pixels.
CSS
width: calc(100% - 50px);
Adds 2 rem units plus 10 pixels for top margin.
CSS
margin-top: calc(2rem + 10px);
Font size grows with viewport width plus a base size.
CSS
font-size: calc(1vw + 1rem);
Sets height to half of 50% viewport height.
CSS
height: calc(50vh / 2);
Sample Program
This example shows a blue box that is almost full width but leaves 40 pixels total space (20px each side). The font size grows slightly with the viewport width for better readability on bigger screens.
CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS calc Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    padding: 2rem;
  }
  .box {
    width: calc(100% - 40px);
    height: 100px;
    background-color: #4a90e2;
    margin: 20px auto;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(1rem + 1vw);
    border-radius: 0.5rem;
  }
</style>
</head>
<body>
  <div class="box">This box uses calc() for width and font size.</div>
</body>
</html>
OutputSuccess
Important Notes
Always put spaces around operators inside calc() for better browser support.
calc() can be used anywhere CSS accepts length or size values.
You cannot use calc() inside some CSS properties that expect keywords only.
Summary
CSS calc() lets you do math with different units in styles.
Use it to create flexible, responsive layouts mixing fixed and relative sizes.
Remember to add spaces around operators and test on different screen sizes.

Practice

(1/5)
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