¿Qué es calc () en CSS (y cómo usarlo)
Publicado: 2025-07-06Algunas funciones de CSS son poderosas pero rara vez se usan, no porque sean difíciles, sino porque hay alternativas más fáciles disponibles. Calc () es uno de ellos. Es súper útil pero a menudo eclipsado por Clamp ().
Calc () resuelve algunos problemas de diseño que sujetar () no puede tocar. Es ideal para alturas de sección ajustadas, ajustando los encabezados pegajosos y mezcla de unidades flexibles y fijas en una línea de código. Y aquí están las buenas noticias: puede usar Calc () sin escribir una sola línea de código.
En Divi 5, está construido directamente en la interfaz, así que simplemente escriba su valor, y Divi maneja el resto. ¿Quieres ver cómo? En esta publicación, aprenderá cómo funciona Calc (), dónde ayuda y cómo usarlo dentro de Divi 5.
Divi 5 está listo para usarse en nuevos sitios web , pero espere un poco antes de migrar los existentes.
- 1 ¿Qué es Calc () en CSS?
- 1.1 Comprender cómo funciona Calc ()
- 2 ¿Por qué usar calc () cuando tienes Clamp ()?
- 2.1 combinando calc () + clamp ()
- 2.2 Uso de variables CSS con Calc ()
- 3 calc () en divi 5
- 4 Cómo Divi 5 hace usar calc () sin esfuerzo
- 4.1 1. Aplicar calc () a cualquier campo numérico
- 4.2 2. Obtenga vistas previas en vivo instantáneas
- 4.3 3. Construya flujos de trabajo avanzados con Calc ()
- 5 Divi hace que las matemáticas se sientan fáciles
¿Qué es calc () en CSS?
Calc () es una función CSS nativa que le permite realizar matemáticas simples como sumar, restar, multiplicar y dividir (con algunas limitaciones dependiendo del contexto) directamente dentro de sus reglas de estilo. Es ideal para ajustar tamaños y espacios, especialmente cuando se mezcla valores fijos y flexibles para obtener diseños más suaves sin codificar todo.
Entendamos esto con un ejemplo. Supongamos que desea que un elemento ocupe el 80% de la pantalla, pero aún deja espacio para el relleno. Puedes escribir:
width: calc(80% - 40px);
Esto le dice al navegador que calcule el ancho dinámicamente restando 40 píxeles del 80 por ciento de su contenedor. Cuando se combina con técnicas de centrado como márgenes automáticos, el espacio restante de la resta se distribuye de manera uniforme. El valor se ajusta automáticamente en función del tamaño de la pantalla.
A primera vista, puede no parecer innovador. Pero Calc () es ideal para resolver problemas de diseño diarios, como el espacio roto en pantallas pequeñas, elementos que superponen los encabezados fijos y las secciones fuera del centro. En lugar de largas consultas de medios, Calc () en una línea a menudo es suficiente. Aquí hay algunos casos de uso comunes de una línea:
- relleno: calc (5VW + 20px); Sigue el fluido de relleno. Incluso en pantallas pequeñas, nunca cae por debajo de 20 píxeles.
- Altura: Calc (100VH - 80px); Mantiene el contenido visible cuando tiene un encabezado fijo. Se ajusta automáticamente en función de la altura de la pantalla.
- Ancho: Calc (60% - 1Rem); Le brinda un control flexible sobre el ancho de la sección mientras mantiene un espaciado constante. Puede ajustar los márgenes circundantes usando valores como margen-izquierda: Calc (40% + 0.5Rem); para centrar visualmente o alinear el elemento dentro de su contenedor.
En resumen, Calc () elimina la necesidad de escribir CSS adicionales para cada punto de interrupción. En lugar de reescribir estilos repetidamente, puede construir lógica directamente en sus valores y dejar que el diseño responda automáticamente. No solo estás definiendo los tamaños, sino también decidiendo cómo deberían comportarse los elementos.
Comprender cómo funciona Calc ()
La sintaxis básica de Calc () se ve así:
calc(value operator value)
Aquí, puede usar cualquier longitud o unidad válida en valor, y el operador puede ser +, -, *o /.
Por ejemplo, si desea reducir el ancho de un elemento en 40 píxeles, escribiría ancho: Calc (100% - 40px);. ¿Observe el uso de %? Eso es lo que hace que el ancho sea flexible.
Si usáramos Calc (100px - 40px), el resultado siempre sería de 60 píxeles, es decir, estático. Pero al usar un porcentaje, dejamos que el navegador calcule el tamaño en función de la pantalla o el elemento principal. Se ajusta automáticamente a medida que cambia el diseño.
Consejo rápido (y también una regla común): siempre agregue espacios entre valores y operadores para que calc () funcione correctamente. Sin espacios, el CSS no funcionará. A continuación, verá que el ancho del contenedor se restablece al valor predeterminado ya que la función calc () sin espacios ya no es válida:
Usando varias unidades
Acabas de ver cómo se produce el beneficio real de Calc () cuando comienzas a combinar diferentes unidades relativas. Por ejemplo, porcentajes con píxeles o anchos de la vista con REMS, porque es cuando su diseño comienza a responder en función de los cambios en el tamaño de la pantalla.
Para aclararlo, aquí hay algunos combos útiles para tratar de ver cómo funcionan en diseños reales.
Tipo de unidad | Unidad | Descripción | Ejemplo usando Calc |
---|---|---|---|
Estático | PX (píxeles) | Tamaño fijo, en relación con la resolución de la pantalla | Calc (100px - 20px) |
Relativo | % (porcentaje) | En relación con el tamaño del elemento principal | Calc (50% - 10px) |
Relativo | EM (EMS) | En relación con el tamaño de fuente del elemento | Calc (2em + 5px) |
Relativo | REM (Root EMS) | En relación con el tamaño de fuente del elemento raíz | Calc (1.5rem + 3px) |
Relativo | VW (ancho de la visión) | En relación con el ancho de la visión del navegador (1VW = 1% del ancho de la visión) | Calc (100VW - 50px) |
Relativo | VH (altura de la visión) | En relación con la altura de la visión del navegador (1 VH = 1% de la altura de la ventana gráfica) | Calc (100VH - 50px) |
Relativo | vmin | En relación con la dimensión más pequeña de la ventana de ventas alto (ancho o altura) | Calc (5vmin + 10px) |
Relativo | vmax | En relación con la dimensión más grande de la ventana de ventas alto (ancho o altura) | Calc (5vmax - 5px) |
También puede combinar múltiples valores y unidades en una línea, lo que hace que el tamaño de los diseños receptivos sea más preciso. Este ejemplo a continuación usa %, PX y REM para mezclar la escala de diseño, espaciado fijo y tipografía:
width: calc(50% - 40px + 1rem);
- 50% de escalas con el contenedor
- 40px resta el espacio fijo como una barra lateral
- 1REM agrega espaciado basado en el tamaño de la fuente
Funciones de anidación de calc ()
También puede anidar un calc () dentro de otro para construir una lógica de diseño más compleja. Es una excelente manera de reflejar cómo piensas sobre el diseño (capa por capa) con relaciones claras entre valores. Por ejemplo, ancho: Calc (200px - Calc (100px + 2Rem));
Aquí, el navegador primero calcula 100px + 2REM , lo que podría representar relleno, márgenes u tamaño de otro elemento. Luego resta ese total de 200px para obtener el ancho final. El ancho permanece relativo debido a REM.
Este tipo de anidación es útil cuando su diseño depende de más de un factor. En lugar de hacer las matemáticas usted mismo o los valores fijos codificando, puede escribir la relación directamente en el CSS. Mantiene su diseño flexible y más fácil de actualizar más tarde.
No necesitará calc () anidados a menudo, pero puede ayudar cuando se trata de espacios en capas o elementos superpuestos. Dicho esto, es posible que desee comenzar primero con cálculos simples, ya que pueden ser abrumadores. Agregar complejidad se sentirá natural una vez que se sienta cómodo con cómo funciona.
¿Por qué usar calc () cuando tienes Clamp ()?
Si usa Clamp () con más frecuencia, es posible que tenga esta pregunta. Para obtener una respuesta clara, sería una buena idea comprender la diferencia entre los dos:
Característica | abrazadera() | calc () |
---|---|---|
Objetivo | Escala de fluidos dentro de un rango definido | Matemáticas entre valores o unidades |
Sintaxis | Clamp (min, preferida, max) | Calc (valor del operador de valor) |
Responsivo por defecto | Solo si se usa con unidades fluidas | Solo si se usa con unidades fluidas |
Acepta múltiples tipos de unidades | Sí | Sí |
Útil para | Tamaños de fuente, espaciado, anchos de contenedores | Matemáticas de diseño, lógica de espacio, compensaciones fijas |
Puede ser anidado o combinado | Funciona bien con calc () pero no se puede anidar | Puede ser anidado y usado dentro de la abrazadera () |
Clamp () es moderno, por lo que entusiasmarlo por usarlo para construir diseños de fluidos sin confiar en las consultas de los medios es fácil. Pero a pesar de que Clamp () se siente más inteligente, hay muchas situaciones en las que Calc () es más relevante, como lo siguiente:
- Restar valores fijos de diseños flexibles: Uso de altura: Calc (100VH - 80px) Asegúrese de que una sección llene la pantalla menos la altura de un encabezado fijo, por lo que los elementos no se superponen. Clamp () no puede hacer esto porque no es compatible con la resta.
- Elementos de compensación con precisión: un valor como margen-izquierda: Calc (50%-200px); cambia un elemento en relación con su contenedor mientras lo mantiene visualmente equilibrado. Clamp () No puede realizar este tipo de posicionamiento relacional.
- Alineando secciones de lado a lado: lo ayuda a crear diseños receptivos de dos columnas donde una columna con ancho: Calc (60%-2REM); ocupa el 60% del espacio menos una brecha consistente. Clamp () es ideal para escalar un valor único, mientras que Calc () sobresale cuando se necesitan relaciones entre múltiples valores.
En general, Clamp () es excelente al definir cómo un solo valor debe escalar a través de los tamaños de pantalla. Pero Calc () es lo que necesita cuando su diseño depende de más de una cosa a la vez, como en los casos anteriores.
Combinando calc () + clamp ()
Mientras que Calc () y Clamp () son poderosos por su cuenta, ¿por qué usar uno cuando puede combinar ambos? Puede Nest Calc () Inside Clamp () para construir diseños de fluidos con lógica incorporada, como combinar escala flexible con un control preciso.
Por ejemplo, relleno: abrazadera (1REM, Calc (2VW + 10px), 3REM); Crea un espaciado que escala entre 1REM y 3REM, pero el valor "preferido" se basa en una fórmula calc () que combina el ancho de la visión y un valor fijo.

Esto le brinda un control receptivo, lógico y preciso sobre su diseño. Una vez que aprenda cuándo usar calc () y sumar () individualmente y cuándo combinarlos, puede controlar completamente su diseño sin depender de los puntos de interrupción personalizados
Uso de variables CSS con calc ()
También puede extender la flexibilidad de Calc () con las variables CSS. Combine variables con otras unidades, haga matemáticas en ellas y cree una lógica de diseño en torno a valores reutilizables. Por ejemplo, si define: raíz {–gap: 40px;}, luego usando el relleno: calc (var (–gap) + 1rem); Le ayuda a establecer el relleno receptivo en función de sus valores raíz.

Nota: Mientras usa variables CSS dentro de Calc (), envuelva su variable alrededor de var (). Vea cómo lo hice arriba.
Esto le permite crear un sitio web completo utilizando un sistema de diseño consistente (sus variables CSS) mientras aún tiene un control preciso con Calc (). Y si desea realizar cambios (globales), como ajustar el espacio entre su diseño, puede hacerlo cambiando los valores raíz.
No es tan fácil con Clamp (). Mientras que Clamp () admite las variables CSS, cada valor debe resolverse a una unidad completa y válida. ¿Qué quiero decir con esto?
Una función como Clamp (1Rem, Var (–Fluid-Size), 3REM) funciona solo si –fluid-size se resuelve a algo como 4VW. Y si necesita hacer matemáticas con una variable, como sumar o restarlo, debe envolver esa parte en Calc (). Estas cosas menores hacen que Calc () sea esencial al construir valores dinámicos con variables.
Calc () en divi 5
Tanto Calc () como Clamp () son funciones CSS avanzadas que le brindan un poderoso control sobre los diseños, el espacio y la capacidad de respuesta, pero solo si se siente cómodo escribiendo código. Eso limita su uso a desarrolladores o profesionales web. Pero, ¿qué pasa con aquellos que prefieren flujos de trabajo visuales y aún quieren usar calc () y sujeción () en sus diseños? ¿Puedes hacer esto?
Sí, puedes. Dentro de Divi 5, tanto Calc () como Clamp () están disponibles como unidades avanzadas, y no tiene que escribir una sola línea de código para trabajar con ellas.
Suscríbete a nuestro canal de YouTube
Todo lo que hace es ingresar calc () directamente dentro de cualquier campo de entrada numérica, y eso es todo.
El Builder Divi actúa al instante. Una vez que ingrese su valor de calc (), recibe comentarios en vivo mientras diseña. No hay necesidad de cambiar entre el constructor, DevTools o Vistas previas, y no adivinar cómo se verá.
Divi 5 facilita la construcción de diseños más inteligentes y más flexibles sin tocar el código. Incluso puede combinar Calc () con las variables de diseño de Divi o sus propias variables CSS para crear diseños dinámicos reutilizables. Te mostraré cómo hacer eso en la siguiente sección.
Por cierto, ¿sabías que Divi 5 también admite todas las funciones de CSS en unidades avanzadas? Es posible que también desee aprender sobre ellos
Aprenda todo sobre las unidades avanzadas de Divi 5
Cómo Divi 5 hace usar calc () sin esfuerzo
Acabas de ver que Divi 5 hace que el uso de Calc () en tus diseños sea fácil mientras te brinda vistas previas instantáneas mientras trabajas. Pero hay más. Divi ofrece no solo una solución alternativa sino una forma completamente integrada y sin código de desarrollar diseños receptivos basados en lógicos que utilizan las mismas herramientas en las que los desarrolladores confían, sin escribir una línea de código.
Así es como te ayuda a usar calc () heroicamente mientras trabajas en silencio en las sombras:
1. Aplicar calc () a cualquier campo numérico
El hecho de que no estés codificando no significa que estés limitado. En Divi 5, Calc () funciona en cualquier lugar donde se acepte un valor numérico (piense: ancho, altura, acolchado, margen, brecha, tamaño de fuente, en cualquier lugar). Si el campo acepta un número, admite Calc ().
Y la aplicación de calc () es relativamente sencillo. Todo lo que necesita hacer es elegir Calc () de las otras unidades avanzadas e ingresar su fórmula.
Esto significa que puede manejar las matemáticas de diseño visualmente sin dejar al constructor. Ya sea restando la altura de un encabezado fijo, agregando un espaciado flexible a los tamaños de fuente o mezclar unidades para una mejor capacidad de respuesta, Divi le permite hacerlo todo directamente dentro de los campos de diseño.
Simplemente escriba su fórmula, y los resultados se actualizan al instante: sin paneles de código, sin conmutación de pestañas y sin dudas. Es el control total, incorporado directamente en su flujo de trabajo.
2. Obtenga vistas previas en vivo instantáneas
Una de las mejores partes sobre el uso de Calc () en Divi 5 es que puedes ver lo que estás haciendo en tiempo real. No tiene que adivinar cómo se verá el espacio o la alineación. Cuando ingresa su fórmula calc (), el constructor se actualiza al instante.
Como puede ver, el relleno cambió inmediatamente cuando ingresé los valores de calc (). También cambié entre diferentes puntos de interrupción para mostrarle cómo se ajusta el relleno en función del tamaño de la pantalla.
Cualesquiera que sean los cambios que realice, verá el resultado mientras escribe. Esta retroalimentación inmediata lo ayuda a comprender cómo el cálculo afecta su diseño y le permite ajustar los valores rápidamente sin cambiar las pestañas.
3. Construya flujos de trabajo avanzados con Calc ()
Usar calc () en Divi 5 no es poderoso porque ahora puede sumar o restar valores. La verdadera fuerza es desbloquear flujos de trabajo más inteligentes. Divi le permite combinar calc () con herramientas avanzadas como Clamp (), variables CSS, variables de diseño y preajustes de grupos de opciones, todo dentro de un constructor visual.
No te limita a ajustes únicos simples. Usando Divi, puede crear sistemas de diseño que respondan con fluidez al tamaño de la pantalla, sigan reglas de espaciado consistentes y actualicen automáticamente cuando cambian los tokens de diseño. Veamos cómo:
1. Extender calc () con variables CSS
Divi 5 admite variables CSS directamente dentro de los campos de diseño, lo que significa que puede definir valores reutilizables y calcularlos visualmente. Digamos que quiero usar un relleno fijo en todas las secciones de mi página, por lo que lo guardaré como una variable CSS:
:root { --section-padding: calc(4rem + 2vw); }
Para hacerlo, iré a la configuración de la página> Avanzado> CSS personalizado y agregaré mis valores raíz aquí:
Ahora, en lugar de ingresar a la fórmula completa en todas partes, puede usar var (–-section-secting) en cualquier campo de relleno dentro de Divi. El resultado se actualiza en vivo, y si cambio el valor raíz más adelante, todo el diseño refleja instantáneamente ese cambio.
Observe que la unidad avanzada actualizada muestra CALC VAR, lo que significa que la variable CSS se insertó utilizando la función var () dentro de una fórmula calc ().
Usar variables CSS en Divi es sorprendentemente simple. Puede definirlos en la página en sí sin tocar su hoja de estilo. Esto ayuda a mantener un marco de diseño consistente, probar nuevos valores y desarrollar reglas de diseño receptivas.
2. Use calc () en su marco de diseño
Divi 5 le permite guardar valores de calc () como variables de diseño, lo que facilita la reutilización de una lógica de diseño en todo su sitio web. Supongamos que desea que sus secciones de servicio llenen siempre la pantalla menos la altura de un encabezado fijo. Luego, puede crear una variable de número y nombrarla en la altura de la sección con valor calc (120vh - 30px).

Aquí, 30px es la altura del encabezado fijo.
Ahora, para aplicar la variable guardada, vaya a la configuración de diseño de la sección y pasee la altura para ubicar el icono de campo dinámico. Haga clic en él y aparecerá su variable guardada. Haga clic en la altura de la sección para aplicarla.
Este enfoque le brinda un control de diseño completo mientras mantiene su diseño consistente. No estás encerrado en presets o valores estáticos. En su lugar, está construyendo una lógica que se adapta a través de páginas, plantillas y tamaños de pantalla todos visualmente.
Las variables de diseño desbloquean grandes posibilidades. Por ejemplo, puede construir su marco de diseño visualmente y usarlo en todas las páginas de su sitio web para mantener las reglas de diseño consistentes en todo momento. También le recomendamos que construya su tipografía y sistemas de espacios y dimensiones antes de diseñar cualquier página.
3. Crear y guardar preajustes del grupo de opciones
Una vez que su diseño usa los valores de Calc () de manera consistente, Divi 5 facilita el guardar esa lógica para reutilizar. Puede almacenar toda su configuración de estilo (o configuraciones individuales, como relleno, brechas, márgenes y anchos) como preajustes de grupos de opciones. Esto significa que en lugar de aplicar fórmulas calc () repetidamente, solo selecciona un preajuste y la matemática de diseño se aplica instantáneamente.
Por ejemplo, si ha usado el relleno: Calc (4REM + 2VW) en varias secciones, no necesita volver a escribirlo en todas partes. Simplemente guárdelo como un preajuste:
Ahora, aplique su preajuste guardado donde sea necesario. Todo se actualiza visualmente, por lo que puede ver el efecto en vivo de inmediato.
Aún mejor, si ha utilizado variables de diseño en esos preajustes, puede actualizar los valores a nivel mundial más tarde. Cambie la variable una vez, y cada preajuste que lo use reflejará la actualización. Esto hace que las ediciones a gran escala sean rápidas y consistentes.
Observe cómo al cambiar los valores guardados en las variables de diseño, también se actualizan en la sección de relleno y al mismo tiempo nos dan una vista previa en vivo. Esto se debe a que utilicé la variable de altura de sección dentro de la sección de espacio preestablecida.
Ese es el poder que trae Divi 5. Le ayuda a escalar su sistema de diseño mientras mantiene una lógica de diseño avanzada consistente en todo el sitio. Una vez que se acostumbra a combinar unidades avanzadas como Calc () (consulte aquí más casos de uso de Calc () con consejos para dominarlas de manera efectiva) con el sistema de diseño modular de Divi, desbloqueará una forma eficiente y divertida de crear sitios web.
Divi hace que las matemáticas se sientan fáciles
No tiene que ser un desarrollador para usar funciones CSS como Calc () y Clamp (). Divi 5 lleva estas herramientas avanzadas a una interfaz visual que es fácil de explorar, probar y aplicar. Puede hacer todo, desde ajustes de diseño simples hasta sistemas de diseño complejos sin escribir una línea de código.
Ya sea que esté ajustando el espaciado, el uso de variables o la creación de preajustes reutilizables, Divi hace que las matemáticas de diseño receptivo sean accesibles para todos. ¿Quiere probar cómo funciona sin problemas () dentro de Divi? Descargue el Alfa Public Public hoy hoy y experimente por usted mismo.
Divi 5 está listo para usarse en nuevos sitios web, pero espere un poco antes de migrar los existentes.