CSS calc()

The CSS calc() function is used to perform mathematical calculations directly in CSS. It allows you to calculate property values using arithmetic operators.

In this chapter, you will learn what the CSS calc() function is, its syntax, supported operators, important rules, and how to use it through practical examples.

What is the CSS calc() Function?

The calc() function evaluates a mathematical expression and uses the result as the value of a CSS property. It allows developers to combine different units, such as percentages, pixels, em, rem, and viewport units, within a single calculation.

The calc() function is commonly used when fixed values and relative values need to work together. For example, you can subtract a fixed-width sidebar from a percentage-based layout or calculate spacing dynamically.

Syntax

The following syntax is used to perform calculations in CSS.

calc(expression)

In this syntax:

• expression specifies the mathematical expression to be evaluated.

Supported Operators

The calc() function supports the following arithmetic operators.

Important Points

• A space must be placed before and after the + and - operators. For example, calc(100% - 20px) is valid, whereas calc(100%-20px) is invalid.
• Although spaces around * and / are optional, using spaces improves readability.
• Different CSS units such as %, px, em, rem, vw, and vh can be combined in the same expression.
• The calc() function can be nested inside another calc() function.

Using Basic Calculations

The calc() function can perform simple arithmetic using values with the same unit. This makes it easy to calculate widths, heights, margins, and other CSS properties without manually computing the result.

Example

The following example demonstrates how to use the calc() function with subtraction to calculate the width and height of an element.

Explanation

In this example, the width is calculated using calc(150% - 75%), resulting in 75%. Similarly, the height is calculated using calc(350px - 75px), resulting in 275px. The calculated values are applied automatically by the browser.

Using Mixed Units

One of the biggest advantages of the calc() function is its ability to combine different units within the same expression. This helps create flexible layouts that adapt to different screen sizes.

Example

The following example demonstrates how to combine percentage, pixel, and em units using the calc() function.

Explanation

In this example, the calc() function combines different units such as %, px, and em. The browser calculates the final values for properties like width, padding-top, and padding-left, making the layout more responsive.

Using Nested calc() Functions

The calc() function can also be nested inside another calc() function. This is useful when a calculation depends on the result of another calculation.

Example

The following example demonstrates how to nest one calc() function inside another.

Explanation

In this example, the inner calc() function first evaluates 40em / 3. The result is then multiplied by 2 using the outer calc() function to determine the final width of the element. Nested calculations help simplify complex mathematical expressions in CSS.