Docs executáveis de CSS: calc()

Q: O que o calc() faz no CSS?

Calcula um valor a partir de uma expressão com +, -, * e /, e consegue misturar unidades que o navegador só conhece na hora do layout. width: calc(100% - 200px) é a largura toda do pai menos 200px, seja qual for a largura do pai.

Q: Por que meu calc() não funciona?

A causa mais comum é a falta de espaços: + e - precisam de espaço dos dois lados, então calc(100%-20px) é inválido. Outras causas são multiplicar dois comprimentos (10px * 2px) ou dividir por um comprimento, o que não dá um comprimento. Um calc() inválido torna a declaração inteira inválida, e o navegador a ignora.

Q: Dá para usar variáveis CSS no calc()?

Sim. calc(var(--gap) 2) dobra uma variável, e calc(var(--columns) 1px) transforma um número sem unidade em pixels. O valor da variável é substituído primeiro, e depois a conta é feita.

Q: Preciso de espaços em volta de * e / no calc()?

Não. Só + e - exigem espaços, porque sem eles -20px seria lido como um número negativo. Os espaços em volta de * e / são opcionais, mas colocá-los em tudo é a regra mais fácil de lembrar.

Q: Qual a diferença entre calc() e clamp()?

calc() calcula um valor a partir de uma expressão. clamp(MIN, VAL, MAX) mantém um valor entre dois limites. Os dois se combinam: cada argumento do clamp() já aceita contas no estilo do calc, como clamp(1rem, 1rem + 2vw, 3rem).

O que o calc() faz

calc() faz contas dentro de um valor CSS, e consegue misturar unidades que só ganham tamanho na hora do layout. O caso clássico é "a largura toda menos uma barra lateral fixa":

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .layout { background: #e5e7eb; height: 110px; }
    .side { float: left; width: 180px; height: 100%; background: #111827; color: white; }
    .main {
      float: left;
      width: calc(100% - 180px); /* whatever is left next to the sidebar */
      height: 100%;
      background: #2563eb;
      color: white;
    }
  </style>
</head>
<body>
  <div class="layout"><div class="side">180px</div><div class="main" id="m">calc(100% - 180px)</div></div>
  <p id="out"></p>
  <script>
    const m = document.getElementById('m');
    document.getElementById('out').textContent = 'main is ' + m.offsetWidth + 'px of a ' + m.parentElement.offsetWidth + 'px row';
  </script>
</body>
</html>

O 100% só é conhecido depois que a página é montada, e 180px é fixo, então nenhuma unidade sozinha conseguiria expressar isso. O calc() resolve: em uma prévia com 800px de largura, a linha tem 784px e a coluna principal fica com 604px, e a linha embaixo do layout mostra os números reais. Hoje, flexbox ou grid fariam esse layout sem conta, mas a mesma subtração continua aparecendo em todo lugar: uma altura menos um cabeçalho, uma largura menos um gap.

As regras de sintaxe

width: calc(100% - 2rem);          /* + and - need spaces on both sides */
width: calc(100% / 3);             /* divide by a plain number */
margin: calc(var(--space) * 2);    /* multiply by a plain number */
height: calc(100vh - (64px + 1rem)); /* parentheses group */

Regra	Válido	Inválido
Espaços em volta de `+` e `-`	`calc(100% - 20px)`	`calc(100%-20px)`
`*`: pelo menos um lado é um número puro	`calc(2 * 1rem)`	`calc(2px * 3px)`
`/`: divida um comprimento por um número puro	`calc(100% / 3)`	`width: calc(300px / 3px)` (não é um comprimento)
As unidades precisam ser compatíveis	`calc(1rem + 10px)`	`calc(1rem + 2s)`

A regra do espaço existe porque 100% -20px seria lido como dois valores separados, o segundo negativo. Quando um calc() é inválido, a declaração inteira é descartada e o elemento mantém o valor que já tinha de regras anteriores.

Teste uma expressão

Digite qualquer expressão para a largura da caixa. O navegador informa se ela é válida e a largura resultante:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc tester</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .track { background: #e5e7eb; margin: 10px 0; }
    #box { width: 50%; height: 40px; background: #16a34a; }
  </style>
</head>
<body>
  <label>width: calc(<input id="expr" value="100% - 200px" size="24">)</label>
  <div class="track"><div id="box"></div></div>
  <p id="out"></p>
  <script>
    const input = document.getElementById('expr');
    const box = document.getElementById('box');
    const update = () => {
      const value = 'calc(' + input.value + ')';
      const ok = CSS.supports('width', value);
      box.style.width = ok ? value : '';
      document.getElementById('out').textContent = ok
        ? 'valid: ' + box.offsetWidth + 'px of ' + box.parentElement.offsetWidth + 'px'
        : 'invalid: the browser would ignore this declaration';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Experimente 100%-200px (inválido, sem espaços), 100% / 3, 50% + 4rem, 2 * 120px, 200px * 2px (inválido) e (100% - 40px) / 2.

calc() com variáveis CSS

Variáveis e calc() andam juntos: guarde um valor base uma vez e derive o resto dele. Uma variável sem unidade vira um comprimento quando você a multiplica por uma unidade:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc and variables</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    :root { --space: 8px; --cols: 3; }
    .grid {
      display: grid;
      grid-template-columns: repeat(var(--cols), 1fr);
      gap: calc(var(--space) * 2);        /* 16px */
      padding: calc(var(--space) * 3);    /* 24px */
      background: #e5e7eb;
    }
    .grid div {
      height: calc(var(--cols) * 20px);   /* unitless 3 becomes 60px */
      background: #2563eb;
    }
  </style>
</head>
<body>
  <div class="grid"><div></div><div></div><div></div></div>
  <p id="out"></p>
  <script>
    const g = getComputedStyle(document.querySelector('.grid'));
    const cell = getComputedStyle(document.querySelector('.grid div'));
    document.getElementById('out').textContent = 'gap ' + g.columnGap + ', padding ' + g.paddingTop + ', cell height ' + cell.height;
  </script>
</body>
</html>

Mude --space para 12px ou --cols para 4 e todos os valores derivados acompanham. A página de variáveis CSS trata de como declará-las e do escopo delas.

Usos comuns

Necessidade	calc()
Preencher o espaço ao lado de um elemento fixo	`width: calc(100% - 240px)`
Seção abaixo de um cabeçalho fixo	`min-height: calc(100vh - 64px)`
Metade da largura menos metade de um gap	`width: calc(50% - 8px)`
Centralizar uma caixa absolute de 100px	`left: calc(50% - 50px)`
Tamanho de fonte que cresce um pouco com a tela	`font-size: calc(1rem + 0.5vw)`
Transformar uma variável numérica em comprimento	`calc(var(--n) * 1px)`
O negativo de uma variável	`calc(var(--space) * -1)`

Para um valor que precisa ficar entre limites, use clamp(), que aceita as mesmas contas nos argumentos sem escrever calc().

Onde o calc() funciona

Em qualquer lugar onde um comprimento, porcentagem, número, ângulo ou tempo é permitido: width, margin, padding, top, font-size, line-height, tamanhos de trilhas do grid, transition-delay e ângulos dentro de transform. Ele pode ser aninhado, e um calc() aninhado equivale a parênteses simples.

Os ângulos são um bom exemplo. Cada marcação abaixo tem o próprio --i (de 0 a 11), e uma única regra o transforma em ângulo com calc(var(--i) * 30deg):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc angles</title>
  <style>
    .dial { position: relative; width: 160px; height: 160px; border-radius: 50%; background: #e5e7eb; }
    .tick {
      position: absolute;
      top: 10px;
      left: calc(50% - 2px);          /* center a 4px wide tick */
      width: 4px;
      height: 16px;
      background: #111827;
      transform-origin: 2px 70px;     /* the center of the dial */
      transform: rotate(calc(var(--i) * 30deg));
    }
  </style>
</head>
<body>
  <div class="dial" id="dial"></div>
  <p id="out"></p>
  <script>
    const dial = document.getElementById('dial');
    for (let i = 0; i < 12; i++) dial.insertAdjacentHTML('beforeend', '<div class="tick" style="--i: ' + i + '"></div>');
    document.getElementById('out').textContent = 'tick 3 transform: ' + getComputedStyle(dial.children[3]).transform;
  </script>
</body>
</html>

A marcação 3 recebe rotate(90deg), que o Chrome informa como a matriz matrix(0, 1, -1, 0, 0, 0): um quarto de volta. left: calc(50% - 2px) centraliza cada marcação subtraindo metade dos 4px de largura dela.

Erros comuns

Sem espaços em volta de - ou +. calc(100%-20px) é inválido e ignorado.
Multiplicar dois comprimentos. calc(10px * 2px) não tem significado no CSS. Um dos lados do * precisa ser um número puro.
Usar calc() em uma altura em porcentagem sem altura no pai. calc(100% - 20px) em height precisa de um pai com altura definida, assim como height: 100%.
Usar calc() onde flexbox ou grid resolveriam. width: calc(33.333% - 10px) para colunas é frágil; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px não precisa de conta.
Esperar uma mensagem de erro. O navegador não avisa sobre um calc() inválido. Confira o elemento nas ferramentas de desenvolvedor: uma declaração inválida aparece riscada.

Perguntas frequentes

O que o calc() faz no CSS?

Calcula um valor a partir de uma expressão com +, -, * e /, e consegue misturar unidades que o navegador só conhece na hora do layout. width: calc(100% - 200px) é a largura toda do pai menos 200px, seja qual for a largura do pai.

Por que meu calc() não funciona?

A causa mais comum é a falta de espaços: + e - precisam de espaço dos dois lados, então calc(100%-20px) é inválido. Outras causas são multiplicar dois comprimentos (10px * 2px) ou dividir por um comprimento, o que não dá um comprimento. Um calc() inválido torna a declaração inteira inválida, e o navegador a ignora.

Dá para usar variáveis CSS no calc()?

Sim. calc(var(--gap) * 2) dobra uma variável, e calc(var(--columns) * 1px) transforma um número sem unidade em pixels. O valor da variável é substituído primeiro, e depois a conta é feita.

Preciso de espaços em volta de * e / no calc()?

Não. Só + e - exigem espaços, porque sem eles -20px seria lido como um número negativo. Os espaços em volta de * e / são opcionais, mas colocá-los em tudo é a regra mais fácil de lembrar.

Qual a diferença entre calc() e clamp()?

calc() calcula um valor a partir de uma expressão. clamp(MIN, VAL, MAX) mantém um valor entre dois limites. Os dois se combinam: cada argumento do clamp() já aceita contas no estilo do calc, como clamp(1rem, 1rem + 2vw, 3rem).

Conceitos relacionados