Le modèle de boîte
Les quatre couches d'une boîte (contenu, padding, bordure, marge), box-sizing, la différence entre block, inline et inline-block, et la fusion des marges verticales.
- 24 cartes
- 5 thèmes
- Gratuit
Le programme, thème par thème
Le poids de chaque thème suit celui que lui donne l'examen.
- Notions
- Questions
- Ranger et relier
- Les chiffres
- Mises en situation
Quelques cartes du deck
Padding : de quoi s'agit-il ?
Voir la réponse
Espace entre le contenu et la bordure, à l'intérieur de la boîte ; il prend la couleur de fond de l'élément.
Si un bouton a un fond bleu, le fond s'étend sous cet espace : c'est ce qui distingue le padding de la marge, transparente.
Quelle largeur totale cette boîte occupe-t-elle à l'écran ?
```css
.carte {
width: 300px;
padding: 0 20px;
border: 2px solid black;
}`- 344 px
- 300 px
- 304 px
- 340 px
Voir la réponse
344 px
En
content-box, width ne mesure que le contenu : 300 + 2 × 20 de padding + 2 × 2 de bordure = 344. Avecbox-sizing: border-box, la boîte ferait 300 px.De l'intérieur vers l'extérieur, une boîte empile le …, le …, la … puis la ….
Voir la réponse
De l'intérieur vers l'extérieur, une boîte empile le contenu, le padding, la bordure puis la marge.
L'inspecteur du navigateur dessine exactement ces couches en rectangles imbriqués quand on survole un élément.
Marge : de quoi s'agit-il ?
Voir la réponse
Espace transparent autour de la bordure, qui écarte la boîte de ses voisines.
C'est la couche extérieure, au-delà de la bordure : le fond de l'élément ne s'y étend pas et un clic dans la marge n'atteint pas l'élément. Avec
margin: 0 auto, une marge automatique centre un bloc de largeur fixe.