calc(): matemáticas en CSS

calc() te permite hacer operaciones matemáticas directamente en los valores de CSS, incluyendo la mezcla de unidades de distintos tipos.

Operadores disponibles

Operador	Descripción	Ejemplo
`+`	Suma	`calc(100px + 50px)`
`-`	Resta	`calc(100% - 2rem)`
`*`	Multiplicación (un operando sin unidad)	`calc(1.5 * 16px)`
`/`	División (divisor sin unidad)	`calc(200px / 4)`

La regla de los espacios — obligatoria en `+` y `-`

/* ❌ MAL — sin espacios: el navegador lo interpreta como un número negativo, no como resta */
width: calc(100%-2rem);

/* ✅ BIEN — con espacios: operación de resta válida */
width: calc(100% - 2rem);

Para * y / los espacios no son obligatorios, pero se recomienda incluirlos por claridad.

Por qué importa: el parser de CSS necesita los espacios alrededor de + y - para distinguir entre un operador aritmético y un número positivo/negativo. Sin espacios, la declaración completa es inválida y el navegador la ignora silenciosamente.

El caso de uso más importante: mezclar unidades

calc() brilla cuando querés combinar una unidad fluida con una fija — algo que no se puede hacer sin la función:

/* El contenido ocupa todo el ancho menos 240px de sidebar */
.contenido {
  width: calc(100% - 240px);
}

/* Padding con una base rem más un ajuste fino en px */
.caja {
  padding: calc(1rem + 4px);
}

Sin calc(), tendrías que calcular el valor final vos mismo y hardcodearlo — y se rompería al cambiar el contexto.

Qué se puede validar con checks automáticos

En el sandbox, calc() es validable solo cuando los operandos son todos en px:

calc(300px - 40px)  → 260px   ✅ predecible
calc(8px + 8px)     → 16px    ✅ predecible
calc(100% - 2rem)   → ❌ el 100% depende del iframe variable

Igual podés usar calc(100% - 2rem) en el sandbox y ver el efecto visual. Solo el validador automático necesita valores fijos para comparar.

Tu turno: aplicá las dos expresiones calc() a .caja y verificá con “Comprobar”. Recordá los espacios alrededor de los operadores.

Diagnóstico de errores comunes: si escribís calc(300px-40px) sin espacios alrededor del -, el CSS es inválido y el computed de width va a ser auto (o el ancho del iframe). El check va a fallar con actual: "Xpx" distinto de "260px" — esa es la pista de que faltaron los espacios.