CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 5 · Application directe du cours

Calculer une boîte

Le modèle de boîte · niveau 1 (application)

Énoncé

Une page ne contient que <div class="carte">Une carte</div> (la marge du <body> est de 16 pixels) et cette règle :


.carte {
  width: 250px;
  padding: 10px 15px;
  border: 2px solid #1f3a68;
  margin: 20px;
}

Quelle est la largeur de la boîte bordée ? Quelle place horizontale occupe-t-elle, marges comprises ?
Quelle est sa hauteur bordée, pour une ligne de texte de 18 pixels ?
À quelle abscisse commence la bordure gauche ?
Mêmes questions si l'on ajoute box-sizing: border-box. Quelle est alors la largeur du contenu ?

En content-box, la boîte bordée mesure $250 + 2 \times 15 + 2 \times 2 = 284$ pixels ; avec les marges, elle occupe $284 + 2 \times 20 = 324$ pixels.
Hauteur bordée : $18 + 2 \times 10 + 2 \times 2 = 42$ pixels.
La marge du <body> (16) et celle de la carte (20) sont horizontales : elles s'additionnent. La bordure gauche commence à l'abscisse 36. (Verticalement, en revanche, la marge de 20 fusionne avec celle de 16 du <body> : le haut de la carte est à 20.)
En border-box, la boîte bordée mesure 250, l'encombrement $250 + 40 = 290$ , et le contenu $250 - 30 - 4 = 216$ pixels. La hauteur reste 42, l'abscisse 36.

Les deux cartes sont dans code/ch5/exo-taille.html ; Chromium donne 284 et 250 de large, 42 de haut, abscisse 36.

100 % gratuit

La suite du chapitre est sur Adloun

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.