Le Modèle de Boîtes (Box Model)
Le secret N°1 de la mise en page en CSS.
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 :
Margin
Border
Padding
Contenu
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.
CSScss
.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.
CSScss
.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.
CSScss
.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
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.
CSScss
/* Le code à mettre au début de ton CSS pour ne jamais être embêté */
* {
box-sizing: border-box;
}