¿Cómo utilizar la función calc() en CSS?

La función calc() en CSS es muy útil para hacer cálculos que determinan el tamaño, margen, padding, entre otros, de los elementos HTML. Es bastante sencilla de usar.

Así es como puedes utilizar la función calc() en CSS:

```css
elemento{

/* para un margen de 50px menos 20px */ margin: calc(50px – 20px); /* para un ancho del 100% menos 50px */ width: calc(100% – 50px); /* para un tamaño de fuente de 1em más 2px */ font-size: calc(1em + 2px); /* para un alto de 100vh (100% de la altura de la ventana) menos 100px */ height: calc(100vh – 100px); /* También puedes anidar cálculos */ width: calc(100% – 50px – 2em);

}
```
Es importante tener en cuenta que calc() solo puede hacer una operación a la vez, es decir, puede sumar, restar, multiplicar o dividir, pero sólo una de esas operaciones a la vez. Si quieres hacer más de una operación en un solo cálculo, tienes que usar paréntesis para delimitar las partes del cálculo que quieres que se hagan juntas. Por ejemplo:

```css
elemento{ /* esto restará 20px al resultado de multiplicar 50% por 2 */

width: calc(50% * 2 – 20px); } ``` Recuerda siempre poner un espacio antes y después del operador, si no lo haces puede que la función no funcione correctamente.