Django - 3.5 Maîtrisez le modèle de boîte CSS (box model)
Le box model, ou modèle de boîte, décrit comment le navigateur calcule l'espace occupé par chaque élément HTML. Chaque élément est une boîte rectangulaire, faite d'un contenu, d'un remplissage, d'une bordure et d'une marge. Comprendre ces couches vous aide à contrôler précisément la mise en page de vos pages.
Les zones d'une boîte CSS
Le module CSS des boîtes définit des rectangles qui entourent chaque élément. Ces rectangles incluent une zone de remplissage, appelée padding, et une marge, appelée margin.
Le remplissage se place entre le contenu et la bordure. La marge se place à l'extérieur de la bordure et sépare la boîte de ses voisines.
Les propriétés se répartissent en plusieurs familles : celles qui gèrent le flux du contenu, celles qui fixent la taille de la boîte, et celles qui règlent les marges.
Ces propriétés se combinent librement. Leur choix dépend du rendu recherché et de la structure de votre code.
Des éléments en position de bloc
La vidéo part de trois éléments HTML placés en position de bloc. Un élément de type bloc prend sa propre ligne lors du rendu par le navigateur.
Le paragraphe de l'exemple reçoit une bordure ajoutée en CSS. Il occupe alors une ligne entière, avec des dimensions précises.
Mettre en pratique
Pour tester, la vidéo met une partie du code en commentaire, puis actualise le navigateur. Seuls les éléments utiles restent affichés, avec leurs dimensions.
Vous pouvez utiliser la bordure, le remplissage, la marge et la propriété display pour le bloc. Le choix dépend de la structure que vous voulez donner à votre code.
En résumé
Chaque élément HTML est une boîte formée d'un contenu, d'un remplissage, d'une bordure et d'une marge. La propriété display permet de définir le type de boîte. Testez vos changements dans le navigateur pour voir l'effet immédiatement.
Points clés
- Chaque élément HTML est une boîte rectangulaire.
- Le remplissage (padding) se place entre le contenu et la bordure.
- La marge (margin) se place à l'extérieur de la bordure.
- La propriété display définit si un élément se comporte en bloc.
- Modifier une valeur puis actualiser le navigateur montre l'effet immédiatement.
Questions fréquentes
Qu'est-ce que le box model en CSS ?
C'est le modèle qui décrit une boîte rectangulaire autour de chaque élément HTML, avec un contenu, un remplissage, une bordure et une marge.
Quelle est la différence entre padding et margin ?
Le padding se trouve à l'intérieur de la bordure, entre le contenu et la bordure. La marge se trouve à l'extérieur de la bordure, entre la boîte et les autres éléments.
Pourquoi un paragraphe occupe-t-il toute une ligne ?
Un élément de type bloc, comme un paragraphe, prend sa propre ligne lors du rendu par le navigateur.