The CSS calc() function enables dynamic mathematical calculations within stylesheets. It supports operations like addition, subtraction, multiplication, and division, allowing developers to mix units and adjust sizes on the fly. 1. Always use spaces around and - operators. 2. It simplifies responsive design by adjusting widths, such as .main-content { width: calc(100% - 200px); }. 3. Facilitates precise positioning, like transform: translateX(calc(-50% - 10px));. 4. Integrates with CSS variables for flexible layouts using var(), enabling centralized control of spacing and margins.

The CSS calc() function lets you perform math operations right in your stylesheets. It’s super handy when you need to mix different units or dynamically adjust sizes without JavaScript.

Basic Syntax and Usage

calc() takes a mathematical expression as its value. You can use , -, *, and / operators inside it. One important thing: always add spaces around the and - operators, or they won’t work properly.

For example:

width: calc(100% - 20px);

This line means the element will take up 100% of its container’s width minus 20 pixels — useful for things like subtracting a border or margin.

You can also mix units:

height: calc(100vh - 60px);

Here, vh (viewport height) is combined with px to make sure something fits neatly on screen.

Responsive Layouts Made Easier

One of the most common uses of calc() is in responsive design. Let’s say you have a layout where a sidebar is fixed at 200px wide, and you want the main content area to fill the rest of the space. You could do this:

.main-content {
  width: calc(100% - 200px);
}

That way, no matter how wide the screen is, the main content area adjusts automatically.

Another example: if you’re using CSS Grid and want one column to be a fixed size while another takes up the remaining space, calc() comes in handy again:

grid-template-columns: 250px calc(100% - 250px);

It keeps things flexible without needing media queries for every little change.

Adjusting Spacing and Positioning

Sometimes you need to position an element precisely, especially when working with padding, margins, or transforms.

Let’s say you want to center an element that has a fixed width and also needs a bit of extra space on one side:

transform: translateX(calc(-50% - 10px));

This moves the element a little more to the left than just simple centering would.

Or imagine a card layout where each card has a percentage-based width and some margin:

.card {
  width: calc(33.333% - 20px);
  margin: 10px;
}

This helps avoid unexpected wrapping issues by accounting for the margins directly in the width calculation.

Working With Custom Properties (CSS Variables)

calc() works great with CSS variables too. This combo gives you even more flexibility.

Say you define a base spacing unit:

:root {
  --spacing: 20px;
}

Then you can use it like this:

padding: calc(var(--spacing) * 2);

Now you’ve got dynamic padding based on a central variable. Change --spacing once, and it updates everywhere it's used.

You can also layer multiple variables:

margin: calc(var(--top)   10px) calc(var(--side) * 2);

This makes complex layouts easier to manage and tweak later.

Those are some of the most practical uses of calc(). It’s not complicated, but it opens up a lot of options for smarter, cleaner CSS.

The above is the detailed content of What is the CSS calc() function and what are its use cases?. For more information, please follow other related articles on the PHP Chinese website!