Phase 2 — Les fondamentaux CSS
#6 Le modèle de boîte
margin, padding, border, box-sizing
Le modèle de boîte CSS
Chaque élément HTML est une boîte rectangulaire. Le modèle de boîte décrit comment le navigateur calcule la taille totale d'un élément :
Couches du modèle de boîte
/*
┌──────────────────────────────────────┐
│ margin │
│ ┌──────────────────────────────────┐ │
│ │ border │ │
│ │ ┌──────────────────────────┐ │ │
│ │ │ padding │ │ │
│ │ │ ┌──────────────────┐ │ │ │
│ │ │ │ contenu │ │ │ │
│ │ │ └──────────────────┘ │ │ │
│ │ └──────────────────────────┘ │ │
│ └──────────────────────────────────┘ │
└──────────────────────────────────────┘
*/box-sizing: border-box
Par défaut, width ne définit que la largeur du contenu. Utilisez box-sizing: border-box pour inclure padding et border dans la largeur :
border-box
/* Appliquer à tous les éléments (recommandé) */
*, *::before, *::after {
box-sizing: border-box;
}
/* width inclut maintenant padding + border */
.card {
width: 300px; /* Largeur totale = 300px */
padding: 16px; /* Inclus dans les 300px */
border: 2px solid #ddd; /* Inclus dans les 300px */
}Fusion des marges
Les marges verticales entre éléments adjacents fusionnent — seule la plus grande est appliquée :
Fusion des marges
/* Ces deux paragraphes auront 30px entre eux, pas 50px */
.premier { margin-bottom: 20px; }
.deuxieme { margin-top: 30px; }À vous de jouer
Essayez les commandes ci-dessous :
terminal — browser