calc()

calc() es una función de valor de CSS que permite escribir operaciones matemáticas directamente donde iría un valor. En lugar de calcular el número final vos mismo y hardcodearlo, escribís la expresión y el navegador la resuelve: width: calc(100% - 240px) significa exactamente eso — el ancho total menos 240 píxeles. El navegador hace la cuenta en cada repintado, con los valores reales del momento.

Lo que distingue a calc() de simplemente escribir un número es que permite mezclar unidades de distintos tipos en una sola expresión. 100% - 2rem combina una unidad relativa al contenedor con una unidad relativa a la fuente raíz — dos cosas que normalmente no pueden coexistir en un único valor. Sin calc(), esa operación es imposible y la única alternativa es hardcodear un número que se rompe cuando cambia el contexto. calc() es la herramienta que hace posible el diseño fluido con márgenes, paddings o anchos fijos en un mundo de contenedores variables.

Desde el punto de vista del modelo de CSS, calc() no es una propiedad ni un elemento: es una función de valor que puede aparecer donde sea que se espere un valor numérico — width, height, padding, margin, font-size, top, left, cualquier propiedad que acepte longitud, porcentaje, ángulo, tiempo o número. Una sola función puede reemplazar a cualquier valor de esas propiedades.

Cómo funciona

calc() acepta cuatro operadores aritméticos básicos: suma (+), resta (-), multiplicación (*) y división (/).

.elemento {
  width: calc(100% - 240px);        /* resta: ancho total menos sidebar */
  padding: calc(1rem + 4px);        /* suma: base rem más ajuste fino */
  font-size: calc(1.5 * 16px);      /* multiplicación */
  width: calc(600px / 3);           /* división */
}

La regla de los espacios — el gotcha más común

Los operadores + y - deben tener un espacio a cada lado. Sin espacios, el CSS es inválido y el navegador ignora la declaración silenciosamente.

/* ❌ MAL — el navegador lo ignora; "100%-2rem" no es una operación válida */
width: calc(100%-2rem);

/* ✅ BIEN — espacio a cada lado del operador */
width: calc(100% - 2rem);

La razón de esta regla está en el parser de CSS: el guion (-) puede introducir un número negativo (-2rem es un valor negativo, no una resta). El espacio es la señal que le dice al parser que es una operación de resta, no un valor negativo. Sin ese espacio, el parser no puede distinguir entre ambos y marca la expresión como inválida.

Para * y / los espacios no son obligatorios (el parser no tiene la ambigüedad del signo), pero se recomienda incluirlos por legibilidad.

Mezcla de unidades — el superpoder real

La razón más importante para usar calc() es que permite combinar unidades de tipos distintos en una sola expresión. Eso es algo que no se puede lograr de ninguna otra manera en CSS:

/* Layout con sidebar fijo y contenido fluido */
.contenido {
  width: calc(100% - 240px);   /* % no se puede restar de px sin calc */
}

/* Padding que combina una base rem con un ajuste en px */
.seccion {
  padding: calc(1.5rem + 8px);
}

/* Altura que ocupa la pantalla menos el header */
.pagina {
  min-height: calc(100vh - 64px);
}

Sin calc(), habría que hardcodear el resultado final — un número que se rompe cuando cambia el tamaño del contenedor, del viewport o de la fuente.

Anidamiento de calc()

calc() puede anidarse dentro de sí mismo, aunque en la práctica raramente hace falta:

.elemento {
  width: calc(calc(100% - 2rem) / 3);
}

También funciona directamente con var() de custom properties, lo que es una de sus combinaciones más potentes (ver la entrada de custom properties cuando esté disponible):

:root { --sidebar: 240px; }

.contenido {
  width: calc(100% - var(--sidebar));
}

Ejemplo realista

Un layout con sidebar fijo y área de contenido que usa el espacio restante, con padding propio:

.layout {
  display: flex;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
}

.contenido {
  width: calc(100% - 240px);
  padding: calc(1rem + 8px);
}

Cuándo usarlo

• Cuando necesitás combinar unidades de tipos distintos (% con px, vh con rem).
• Para layouts donde un elemento debe ocupar “todo menos N píxeles” (sidebar, padding, border).
• Para valores que dependen de variables CSS (var()), como sistemas de diseño con tokens.
• Cuando el valor final depende de condiciones del viewport o del contenedor que no se pueden hardcodear.

No hace falta usar calc() cuando los operandos son del mismo tipo: padding: calc(8px + 8px) es equivalente a padding: 16px y no agrega nada. calc() tiene valor cuando la expresión no se puede simplificar.

Notas, gotchas e interacción

• El navegador descarta la declaración silenciosamente si calc() es inválido. No hay error visible — simplemente la propiedad no cambia. Si algo no funciona, verificá los espacios alrededor de + y -.
• En multiplicación, uno de los operandos debe ser adimensional (un número sin unidad). calc(2rem * 3) es válido; calc(2rem * 3px) no lo es — el resultado de multiplicar dos longitudes no tiene sentido en CSS.
• En división, el divisor debe ser adimensional. calc(100px / 4) es válido; calc(100px / 4px) no.
• calc() funciona en cualquier propiedad que acepte un valor numérico con unidad, incluyendo margin, padding, top, left, font-size, border-width, line-height, transform translate, etc.
• Interacción con min(), max() y clamp(): calc() es la base. CSS moderno también tiene min(a, b), max(a, b) y clamp(min, val, max) que comparten la misma sintaxis de mezcla de unidades. Son expansión natural de calc() y están en el mismo grupo de funciones matemáticas.

Vigente / legacy

calc() está vigente y con soporte Baseline widely. No hay forma legacy equivalente — antes de calc() no existía otra forma de mezclar unidades distintas en CSS.