Le Modèle de Boîtes (Box Model)
Le secret N°1 de la mise en page en CSS.
Imagine : l'inventaire de ton jeu de rôle préféré. Il est composé d'une grille de "slots" (des emplacements). Chaque slot est une "boîte" en CSS. Le HTML a juste fourni les objets (les icônes de potions, d'épées... ). Le Modèle de Boîtes, c'est simplement la règle de conception de chaque slot.
Cette image de l'inventaire nous montre que chaque boîte est composée de 4 couches, de l'intérieur vers l'extérieur :
3.1 La zone de confort de l'item : padding
Le padding est l'espace à l'intérieur du slot, entre l'icône et le cadre. Il est essentiel pour une interface claire.
.item-slot {
background-color: rgba(0, 0, 0, 0.2);
border: 1px solid #888;
/* On ajoute 8px d'espace tout autour de l'icône */
padding: 8px;
}3.2 Le cadre du slot : border
La border est le cadre de ton slot. Tu peux contrôler son épaisseur, son style et sa couleur.
.slot-legendaire {
padding: 8px;
background: #3a2e0a;
/* Une bordure dorée, épaisse de 2px, pour montrer que c'est du lourd ! */
border: 2px solid #ffc107;
border-radius: 4px;
}3.3 L'espacement de la grille : margin
La margin est l'espace à l'extérieur de ton slot. C'est l'espacement invisible qui organise ta grille.
.item-slot {
padding: 8px;
/* ... autres styles ... */
/* On ajoute 4px d'espace autour de chaque slot pour créer la grille */
margin: 4px;
}3.4 Le cheat code des dimensions : box-sizing
Attention, point technique de PGM ! Par défaut, si tu dis à un slot de faire width: 64px, le CSS va calculer la taille de l'icône à 64px, PUIS il ajoutera le padding et la border par-dessus. Ton slot final fera donc 82px ou plus !
La solution est un "cheat code" CSS : box-sizing: border-box;. Avec cette règle, quand tu demandes un slot de 64px, il fera exactement 64px au total.
/* Le code à mettre au début de ton CSS pour ne jamais être embêté */
* {
box-sizing: border-box;
}