CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 10 · Exercice de TD
Calculer avec calc()
Variables, transitions, animations et projet · niveau 1 (application)
Énoncé
Dans un cadre de 900 pixels, avec --espace: 1.5rem et le modèle de boîte par défaut (content-box) :
.bandeau {
width: calc(100% - 2 * var(--espace));
margin-inline: var(--espace);
}
.colonne {
width: calc(100% / 4 - 3 * var(--espace) / 4);
padding: calc(var(--espace) / 2);
}Calculer la largeur visible (bordure comprise) du bandeau et de la colonne. Quatre colonnes séparées par trois espaces tiennent-elles dans le cadre ?
Corrigé
--espace vaut 24 pixels.
- Bandeau : pixels, sans marge interne ni bordure : 852 pixels visibles, et avec ses marges externes. Il tient exactement.
- Colonne : contenu de pixels, plus de marge interne : 231 pixels visibles.
Quatre colonnes et trois espaces : pixels, plus que les 900 du cadre. Le calcul supposait des colonnes de 207 pixels bordure comprise : il faut box-sizing: border-box, ou, mieux, une grille repeat(4, 1fr) avec gap: var(--espace). Chromium mesure bien 852 et 231 pixels (page code/ch10/exercices/calc.html).
100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.