La fonction CSS calc() permet d’effectuer des calculs lors de la définition des valeurs de propriété CSS. C’est très utile lorsque vous avez besoin d’une valeur qui dépend d’autres valeurs ou qui doit être calculée en fonction d’autres valeurs.
Voici comment vous pouvez utiliser calc() en CSS:
1. Pour définir la largeur:
```
.element {
width: calc(100% – 80px);
}
```
Dans cet exemple, la largeur de `.element` sera toujours le 100% de la largeur du conteneur moins 80 pixels.
1. Pour définir la hauteur:
```
.element {
height: calc(100vh – 60px);
}
```
Dans cet exemple, la hauteur de `.element` sera toujours la hauteur de la fenêtre de visualisation (100vh) moins 60 pixels.
1. Pour définir la marge supérieure:
```
.element {
margin-top: calc(50px + 2em);
}
```
Ici, la marge supérieure de `.element` sera toujours de 50 pixels plus deux fois la taille de la police de l’élément.
Remarque: N’oubliez pas de toujours mettre un espace autour des opérateurs (+, -, \*, /). Donc “calc(50%-30px)” sera incorrect, utilisez plutôt “calc(50% – 30px)”.
L’utilisation de calc() est supportée par tous les navigateurs modernes, donc elle est assez sûre à utiliser dans votre code CSS.
