Grâce à la fonction calc(), il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS.
C'est une fonction qui prend comme seul argument une expression mathématique et dont le résultat est utilisé comme valeur de retour. L'expression peut être n'importe quelle expression combinant les différents opérateurs suivants, en respectant l'ordre de priorité des opérateurs :
| + | l'addition | (L'opérateur doit toujours être entouré d'espaces) |
| - | la soustraction | (L'opérateur doit toujours être entouré d'espaces) |
| * | la multiplication | (Au moins un des opérandes doit être un nombre) |
| / | la division | (L'opérande droit doit être un nombre) |
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: inline-block;
margin: 50px;
padding: 30px;
border-color: #000000;
border-style: solid;
border-width: 5px;
background-color: yellow;
width: calc(50% - 170px);
height: 50px;
}
</style>
</head>
<body>
<p></p><p></p>
</body>
</html>
Voir
remarque : On peut vérifier que la somme des éléments en largeur fait 100%.
| 50px | marge extérieure gauche du premier paragraphe |
|---|---|
| 5px | bordure gauche du premier paragraphe |
| 30px | marge intérieure gauche du premier paragraphe |
| 50% - 170px | largeur du premier paragraphe |
| 30px | marge intérieure droite du premier paragraphe |
| 5px | bordure droite du premier paragraphe |
| 50px | marge extérieure droite du premier paragraphe |
| 50px | marge extérieure gauche du second paragraphe |
| 5px | bordure gauche du second paragraphe |
| 30px | marge intérieure gauche du second paragraphe |
| 50% - 170px | largeur du second paragraphe |
| 30px | marge intérieure droite du second paragraphe |
| 5px | bordure droite du second paragraphe |
| 50px | marge extérieure droite du second paragraphe |
| 100% + 340px - 340px | total |