Modèle de Boîte CSS

Le modèle de boîte CSS définit la structure fondamentale de tout élément HTML en incluant les dimensions, le remplissage, les bordures et les marges. Comprendre le modèle de boîte est essentiel pour contrôler l'apparence des éléments sur une page web.

Boîte de Contenu (content-box)

Le modèle de boîte par défaut est appelé le modèle de boîte de contenu. Il inclut la largeur et la hauteur du contenu, mais n'inclut pas les bordures, les marges ou le remplissage.

div.content-box {
    width: 200px; /* Définit la largeur de la boîte de contenu */
    height: 100px; /* Définit la hauteur de la boîte de contenu */
    padding: 20px; /* Ajoute un remplissage de 20 pixels à l'intérieur de la boîte de contenu */
    border: 2px solid #333; /* Ajoute une bordure de 2 pixels avec une couleur grise */
    margin: 10px; /* Ajoute une marge de 10 pixels autour de la boîte de contenu */
}

• Explication : Cette règle crée une boîte de contenu avec une largeur de 200 pixels, une hauteur de 100 pixels, un remplissage de 20 pixels, une bordure de 2 pixels et une marge de 10 pixels.

Boîte de Contenu + Bordure + Remplissage (border-box)

Le modèle de boîte alternatif est le modèle de boîte de contenu + bordure + remplissage. Dans ce modèle, la largeur et la hauteur incluent les dimensions de la bordure et du remplissage, mais pas les marges.

div.border-box {
    box-sizing: border-box; /* Utilise le modèle de boîte de contenu + bordure + remplissage */
    width: 200px; /* Définit la largeur de la boîte avec bordure et remplissage inclus */
    height: 100px; /* Définit la hauteur de la boîte avec bordure et remplissage inclus */
    padding: 20px; /* Ajoute un remplissage de 20 pixels à l'intérieur de la boîte */
    border: 2px solid #333; /* Ajoute une bordure de 2 pixels avec une couleur grise */
    margin: 10px; /* Ajoute une marge de 10 pixels autour de la boîte */
}

• Explication : Cette règle crée une boîte avec le modèle de boîte de contenu + bordure + remplissage, définissant une largeur et une hauteur qui incluent la bordure et le remplissage.

Conclusion

Le choix entre les modèles de boîtes dépend des besoins spécifiques de votre mise en page. L'utilisation de box-sizing: border-box peut simplifier la gestion des dimensions en incluant la bordure et le remplissage dans la largeur et la hauteur totales. Expérimentez avec ces modèles pour trouver celui qui convient le mieux à votre conception.