Summary  
This chapter explains the CSS box model concept, detailing how content, padding, border, and margin layers combine to determine an element’s total dimensions and spacing.

General domain of usage  
Web page layout and design

Watch this video to see how the box model works in real web layouts. You'll learn how content, padding, border, and margin interact, and how changing these values affects the size and spacing of elements in general. Use simple css examples. Do not provide full html document stucture. Focus on css mainly

Les éléments HTML sont affichés sous forme de boîtes rectangulaires sur une page web. Chaque élément possède sa zone de contenu, son remplissage (padding), sa bordure et sa marge.

## Les quatre parties du modèle de boîte


### Contenu
La zone de contenu contient du texte, des images ou d'autres éléments.
Il s'agit de la partie intérieure visible de l'élément.


### Rembourrage
Le rembourrage est l'espace entre le contenu et la bordure.
Il crée un espacement interne.
```css
.box {
  padding: 20px;
}
```
Le rembourrage augmente la taille visible de l'élément.


### Bordure
La bordure entoure le rembourrage et le contenu.
```css
.box {
  border: 4px solid darkblue;
}
```
Par défaut, la largeur de la bordure est de 0, et la couleur de la bordure correspond à la couleur du texte si elle n'est pas spécifiée.


### Marge
La marge est l'espace à l'extérieur de la bordure.
Elle crée une distance entre les éléments.
```css
.box {
  margin: 40px;
}
```
La marge n'affecte pas la couleur de fond de l'élément.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJwYWdlIj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij4KICAgICAgICA8cCBjbGFzcz0icXVvdGUiPgogICAgICAgICAgIktub3dpbmcgeW91cnNlbGYgaXMgdGhlIGJlZ2lubmluZyBvZiBhbGwgd2lzZG9tLiIgLSBBcmlzdG90bGUKICAgICAgICA8L3A+CiAgICAgIDwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogQ3VycmVudCBmb2N1cyAqLwouYm94IHsKICBtYXJnaW46IDQwcHg7IC8qIFNwYWNlIG91dHNpZGUgdGhlIGVsZW1lbnQgKi8KICBib3JkZXI6IDRweCBzb2xpZCBkYXJrYmx1ZTsgLyogVmlzaWJsZSBlZGdlICovCiAgcGFkZGluZzogMjBweDsgLyogU3BhY2UgaW5zaWRlIHRoZSBlbGVtZW50ICovCiAgYmFja2dyb3VuZC1jb2xvcjogbGF2ZW5kZXI7IC8qIFNob3dzIHRoZSBwYWRkZWQgYXJlYSAqLwp9CgovKiBBZGRpdGlvbmFsIHN0eWxlcyBmb3IgYmV0dGVyIGFwcGVhcmFuY2UgKG5vdCB0aGUgY3VycmVudCBmb2N1cykgKi8KYm9keSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjBmMDsKICBtYXJnaW46IDA7Cn0KCi5wYWdlIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBsaWdodGJsdWU7CiAgcGFkZGluZzogMTBweDsKfQoKLnF1b3RlIHsKICBmb250LXNpemU6IDE4cHg7CiAgZm9udC13ZWlnaHQ6IDYwMDsKICBjb2xvcjogIzMzMzsKICBtYXJnaW46IDA7CiAgdGV4dC1hbGlnbjogY2VudGVyOwp9

Dans cet exemple :
- L'arrière-plan remplit la zone de contenu et de remplissage (padding) ;
- La bordure les entoure ;
- La marge crée un espace à l'extérieur de la boîte.

Par défaut, certains éléments possèdent des propriétés `padding` et `margin` prédéfinies. Cela permet de garantir qu'une page web reste lisible même sans aucun style.

Remarque

Le modèle de boîte détermine l'espace qu'un élément occupe sur une page.

La taille totale d'un élément dépend de la taille du contenu, du remplissage (padding), de la bordure et de la marge.

Important

Maîtrisez les bases de CSS, le langage de style qui transforme l’apparence des pages web. Explorez les concepts fondamentaux tels que les styles de texte, les couleurs, l’espacement, le modèle de boîte, Flexbox et les effets décoratifs. Développez les compétences nécessaires pour créer des pages web visuellement attrayantes et bien structurées.

Comprendre comment CSS se connecte à HTML et comment les styles sont appliqués via les sélecteurs. Appliquer des couleurs, des styles de texte et des effets au survol pour contrôler la présentation visuelle.

Amélioration de la typographie à l'aide de la hauteur de ligne, de l'espacement, des propriétés de police et des polices personnalisées. Contrôle des familles de polices, du poids, du style et de la taille pour une meilleure lisibilité.

Contrôle de la structure de la mise en page à l'aide des propriétés de marge, de remplissage, de bordure et de largeur. Compréhension du comportement de dimensionnement des boîtes et des types d'affichage des éléments tels que bloc, en ligne et en ligne-bloc.

Contrôle des mises en page horizontales et verticales à l'aide des propriétés Flexbox. Ajustement de la direction, de l'alignement et de l'espacement pour structurer les composants de l'interface utilisateur.

Amélioration des mises en page à l'aide de couleurs d'arrière-plan, d'images, de pseudo-éléments et d'ombres. Mise en forme des composants visuels pour la profondeur et le contraste.

Comprendre le Modèle de Boîte de Manière Pratique

Les quatre parties du modèle de boîte

Contenu

Rembourrage

Bordure

Marge