¿Qué es calc() en CSS?
calc() permite hacer operaciones con distintas unidades directamente en CSS, algo que de otra forma sería imposible: restar una barra lateral fija de 280px al 100% del ancho, sumar un margen en rem a un tamaño en vw o dividir el espacio disponible entre columnas. El navegador resuelve la expresión en el momento de pintar, con el tamaño real de la pantalla y del elemento padre, y la recalcula si la ventana cambia de tamaño.
Este generador te deja construir la expresión término a término: cada término tiene un valor y una unidad (px, rem, em, %, vw, vh, vmin, vmax o ch) y entre ellos eliges el operador (+, −, × o ÷). Mientras construyes, valida las reglas de calc() que más errores causan: los signos + y − necesitan espacios a ambos lados, y en una multiplicación o división uno de los dos lados tiene que ser un número sin unidad.
Para que sepas qué valor obtendrás de verdad, defines un contexto: ancho del elemento padre, tamaño del viewport, tamaño de fuente raíz y del elemento. Eliges además la propiedad CSS (width, height, margin, padding, font-size, top y otras), ya que el porcentaje se calcula sobre distintas referencias según la propiedad, y la herramienta muestra el resultado en px. Tienes presets para los casos clásicos: ancho completo menos barra lateral, columna centrada, alto completo menos cabecera y padding fluido.
El generador funciona en tu navegador y es gratis sin límites: no necesitas ToolStudio Pro para usarlo ni para copiar el CSS.
¿Cómo construir un calc()?
- Empieza con un preset o añade el primer término con su valor y unidad.
- Añade más términos y elige el operador entre ellos.
- Corrige los avisos de validación si los hay.
- Define el contexto (ancho del padre, viewport, tamaños de fuente) y la propiedad CSS para ver el resultado en px.
- Copia la expresión calc().
Usos habituales
- Contenido que ocupa el ancho completo menos una barra lateral fija.
- Secciones a pantalla completa menos la altura de la cabecera.
- Columnas centradas con un margen mínimo a los lados.
- Padding que combina una parte fija y una parte fluida.
- Repartir anchos entre columnas restando los huecos.
- Posicionar elementos con top o left calculados.
Reglas de sintaxis de calc()
- Los signos + y − deben llevar espacios: calc(100% - 280px) es válido, calc(100%-280px) no.
- En * y / uno de los lados debe ser un número sin unidad: calc(2rem * 1.5) es válido, calc(2rem * 2px) no.
- No se puede dividir entre cero ni entre un valor con unidad: calc(100% / 3) es válido.
- Se pueden anidar paréntesis: calc((100% - 3rem) / 4).
- Ejemplo: calc(100vh - 64px) da 836px en un viewport de 900px de alto.
Preguntas Frecuentes
¿Es gratis?
Sí, es gratis y sin límites. Los generadores CSS de ToolStudio no necesitan Pro: ajusta los valores, mira la vista previa y copia el CSS tantas veces como quieras.
¿Por qué no funciona mi calc(100%-20px)?
Porque faltan los espacios alrededor del signo menos. Escríbelo como calc(100% - 20px).
¿Sobre qué se calcula el porcentaje?
Depende de la propiedad: en width, margin y padding se usa el ancho del contenedor padre; en height, su alto; en font-size, el tamaño de letra del padre. Por eso el generador te pide la propiedad y el contexto.
¿Qué diferencia hay entre calc() y clamp()?
calc() hace una operación y devuelve su resultado. clamp() limita un valor entre un mínimo y un máximo, y su valor preferido suele ser una expresión del tipo calc. Para tamaños fluidos usa el generador de clamp().
¿Puedo usar variables CSS dentro de calc()?
Sí, en tu CSS puedes escribir calc(var(--sidebar) + 1rem). El generador trabaja con valores concretos para poder calcular el resultado en px.