🤔 Qu'est-ce que le Box Model ?

Box Model (modèle de bloc) est la façon dont le navigateur représente et calcule chaque élément de la page. Tout élément HTML, que ce soit <div>, <p>, <button>, est perçu par le navigateur comme boîte rectangulaire.

Et cette boîte a une structure :

• Content — contenu (texte, image, etc.)

• Padding — retrait interne du contenu à l'encadrement

• Border — cadre autour de l'élément

• Margin - retrait externe aux éléments adjacents

🔍 Pourquoi est-ce important ?

Vous pouvez parfaitement connaître le HTML et le CSS, mais si vous ne comprenez pas, comment les tailles de bloc sont calculées, alors vous vous poserez constamment des questions comme :

• « Pourquoi le bloc dépasse-t-il les limites du parent ? »

• « Pourquoi margin ne fonctionne pas comme je l'espérais ? »

• « Pourquoi deux blocs ont-ils fusionné en un seul ? »

Et la réponse est presque toujours dans le box model.

📏 Formule de calcul des dimensions

Exemple :

width: 200px;
padding: 10px;
border: 2px solid black;
margin: 20px;

Si utilisé box-sizing: content-box:

Largeur totale = 200 + 10 + 10 + 2 + 2 = 224px

Si utilisé box-sizing: border-box:

La largeur inclut le padding et la bordure → contenu = 176px

🧠 Comment le navigateur dessine-t-il un bloc ?

1. Parsing HTML

2. Applique le CSS

3. Crée un arbre de rendu

4. Considère la taille de tous les éléments via Box Model

5. Dessine tout sur l'écran

🚫 Erreurs et mythes courants

🔹 Margin collapse

Les retraits verticaux des blocs adjacents ne s'additionnent pas, mais fusionnent — le plus grand reste.

🔹 Les éléments dépassent du conteneur

Si width: 100% est défini et padding est ajouté, le bloc peut apparaître. Solution : box-sizing: border-box.

🔹 La bordure affecte la taille

Même le cadre 1px change de taille. Utilisez box-sizing ou outline pour le survol.

🎨 Comment le voir dans le navigateur ?

1. Ouvrir DevTools (F12)

2. Sélectionner l'élément

3. Dans l'onglet Computed — visualisation Box Model

🧪 Conseils pratiques

• Ajouter globalement : * { box-sizing: border-box; }

• Suivre la marge dans les conteneurs grid/flex

• Au lieu de border, vous pouvez utiliser outline pour la mise au point

💻 Pourquoi est-ce important pour vous, le développeur ?

Box Model, c'est le contrôle de la mise en page. Vous ne définissez pas seulement la largeur et la hauteur, vous contrôlez le comportement de l'interface. Le pixel parfait commence par le modèle de boîte.

📱 Vous voulez comprendre le front-end plus en profondeur ?

Télécharger Code — une application avec des cours étape par étape sur le front-end, où tout est expliqué en russe et en termes simples. Apprenez, pratiquez, créez en toute confiance.

🎯 Conclusion

Box Model est la base. Si vous le maîtrisez, votre mise en page sera stable. Si vous ne le maîtrisez pas, vous vous battrez avec les retraits toute votre vie.

👇 Utilisez-vous box-sizing: border-box par défaut ? Écrivez dans les commentaires comment vous avez rencontré le modèle de boîte pour la première fois et comment tout s'est mis en place !