Le modèle de boîte CSS, ou Box Model en anglais, est une représentation rectangulaire qui entoure chaque élément HTML lorsque nous appliquons le style CSS. Il se compose de marges, bordures, padding (marge intérieure) et le contenu lui-même.
- Le contenu : Il s’agit de la zone où le texte et les images apparaissent.
- Le Padding : Espace entre le contenu et la bordure. Le padding efface un espace autour du contenu, à l’intérieur de la boîte.
- La Bordure : Elle entoure le contenu et le padding.
- La Marge : C’est l’espace entre la boîte et les autres éléments à côté de celle-ci. Une marge efface de l’espace en dehors de la frontière. La marge ne change pas la taille de la boîte, mais peut repousser d’autres éléments de la page.
Pour appliquer le modèle de boîte CSS à un élément HTML, vous pouvez utiliser différentes propriétés CSS. Par exemple:
```
Dans cet exemple, la div possède une largeur de 300px, une bordure solide noire d’un pixel, un padding de 10px et une marge de 5px.
Note : Dans le modèle de boîte standard, si vous définissez une largeur et une hauteur, cela inclura le contenu, mais pas le padding, la bordure ou la marge. Cela peut être modifié en utilisant la propriété `box-sizing` avec la valeur `border-box`, ce qui signifie que la largeur et la hauteur englobent le contenu, le padding et la bordure, mais pas la marge.
