Un guide du débutant sur le modèle de boîte CSS

Si vous vous lancez dans le développement Web, il est essentiel de comprendre le modèle de boîte CSS. C’est le fondement de la façon dont les éléments sont structurés et affichés sur une page Web. Que vous ajustiez les marges, les remplissages ou les bordures, le modèle de boîte définit la façon dont les éléments occupent de l'espace et interagissent les uns avec les autres.

Explorons ce qu'est le modèle de boîte CSS, comment il fonctionne et quelques conseils pour l'utiliser efficacement !

---

Qu'est-ce que le modèle de boîte CSS ?

Le modèle CSS Box est une manière de décrire la disposition des éléments dans un document Web. Chaque élément HTML est essentiellement une boîte rectangulaire et le modèle de boîte se compose de quatre zones clés :

1. Contenu : C'est là que réside le contenu réel de votre élément (texte, images, etc.). C'est la partie la plus intérieure de la boîte.
2. Padding : L'espace entre le contenu et la bordure. Le remplissage augmente la taille de l'élément mais n'affecte pas sa position par rapport aux autres éléments.
3. Bordure : Une ligne qui entoure le remplissage et le contenu. Il peut être personnalisé en termes de largeur, de style et de couleur.
4. Marge : La partie la plus externe du modèle de boîte. Les marges créent un espace entre l'élément actuel et ses éléments environnants.

Voici une répartition visuelle :

---

Décomposer chaque partie

1. Contenu

C'est le cœur de l'élément où vont votre texte, vos images et autres contenus. Vous pouvez contrôler les dimensions de la zone de contenu à l'aide de propriétés telles que la largeur et la hauteur.

Exemple :

.box {
  width: 200px;
  height: 150px;
}

2. Rembourrage

Padding ajoute de l'espace à l'intérieur de l'élément, entre le contenu et la bordure. L'augmentation du remplissage agrandira l'élément, mais ne repoussera pas les autres éléments. Le rembourrage peut être défini pour tous les côtés ou individuellement en utilisant padding-top, padding-right, padding-bottom et padding-left.

Exemple :

.box {
  padding: 20px; /* 20px on all sides */
  padding-left: 10px; /* 10px on the left side only */
}

3. Frontière

La bordure entoure le remplissage et le contenu, agissant comme une limite visuelle pour l'élément. Vous pouvez définir l'épaisseur, le style et la couleur de la bordure à l'aide de propriétés telles que border-width, border-style et border-color.

Exemple :

.box {
  border: 2px solid #3498db; /* 2px solid blue border */
}

4. Marge

Les marges créent un espace à l'extérieur de l'élément, l'éloignant des autres éléments. Tout comme le rembourrage, les marges peuvent être appliquées individuellement ou sur tous les côtés. Une caractéristique unique des marges est qu’elles peuvent s’effondrer, ce qui signifie que deux marges verticales adjacentes peuvent fusionner en une seule marge.

Exemple :

.box {
  width: 200px;
  height: 150px;
}

Exemple d'effondrement de la marge :

Si un élément a une marge inférieure de 20 px et que l'élément suivant a une marge supérieure de 10 px, la marge entre eux sera de 20 px et non de 30 px. C'est ce qu'on appelle l'effondrement des marges.

[Fun Fact : Je viens de l'apprendre en collectant des données sur cet article]

---

La propriété box-sizing

Par défaut, la taille d'un élément est calculée en ajoutant les dimensions, le remplissage et la bordure du contenu. Cela peut rendre la gestion de la taille des éléments délicate, en particulier lorsque le remplissage et les bordures augmentent la taille globale.

Pour simplifier le dimensionnement, CSS a introduit la propriété box-sizing :

dimensionnement de la boîte : content=box #### (par défaut)
La largeur et la hauteur totales de l'élément incluent uniquement le contenu, et un remplissage et une bordure sont ajoutés par-dessus.

dimensionnement de la boîte : bordure-boîte
La largeur et la hauteur totales de l'élément incluent le contenu, le remplissage et la bordure. Cela facilite la gestion de la taille de l'élément, car vous n'avez pas besoin de soustraire manuellement le remplissage ou les bordures des dimensions.

Exemple :

.box {
  padding: 20px; /* 20px on all sides */
  padding-left: 10px; /* 10px on the left side only */
}

---

Conseils pratiques

1. Utilisez box-sizing : border-box pour un modèle de dimensionnement cohérent qui inclut le remplissage et les bordures dans la taille totale. Il simplifie la gestion de la mise en page et est largement adopté par les développeurs.

2. Utilisez les marges pour l'espacement entre les éléments et le rembourrage pour l'espacement au sein d'un élément.

3. Inspecter les éléments : utilisez les outils de développement du navigateur pour inspecter le modèle de boîte des éléments en temps réel. Cela aide à voir visuellement le remplissage, la marge et la bordure.

---

Conclusion

Le modèle CSS Box est fondamental pour créer des mises en page structurées. Comprendre le fonctionnement du modèle de boîte vous aidera à contrôler efficacement la taille, l'espacement et le positionnement des éléments. Commencez à expérimenter le remplissage, les marges, les bordures et la taille des boîtes pour voir leur impact sur vos créations !

Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!