box-sizing et Modèles de Boîtes Alternatifs

La propriété box-sizing et les modèles de boîtes alternatifs offrent des approches flexibles pour définir la taille totale des éléments HTML, incluant ou excluant les bordures et le remplissage dans les dimensions totales.

box-sizing

La propriété box-sizing définit comment la largeur et la hauteur d'un élément sont calculées, incluant ou excluant le remplissage (padding) et la bordure (border). La valeur par défaut est content-box, où la taille ne comprend que le contenu.

div.default-box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid #333;
    box-sizing: content-box; /* Par défaut, exclut le padding et la border de la taille totale */
}

• Explication : Dans cet exemple, la taille totale de la boîte (width et height) exclut le remplissage (padding) et la bordure (border).

Modèle de Boîte Alternatif (border-box)

En utilisant box-sizing: border-box, la largeur et la hauteur incluent le remplissage et la bordure, simplifiant ainsi le calcul des dimensions totales.

div.border-box-example {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid #333;
    box-sizing: border-box; /* Inclut le padding et la border dans la taille totale */
}

• Explication : Avec box-sizing: border-box, la taille totale de la boîte inclut le remplissage (padding) et la bordure (border), facilitant ainsi le contrôle des dimensions.

Modèle de Boîte de Contenu + Bordure + Remplissage (box-sizing: content-box)

Il existe également un modèle de boîte qui combine le contenu, la bordure et le remplissage dans la taille totale, mais sans inclure les marges. Cette approche est semblable à box-sizing: border-box, mais exclut les marges de la taille totale.

div.content-border-padding-box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid #333;
    box-sizing: content-border-padding-box; /* Inclut le padding et la border dans la taille totale, exclut les marges */
}

• Explication : Cette approche inclut le remplissage (padding) et la bordure (border), mais exclut les marges de la taille totale.

Conclusion

En choisissant le modèle de boîte approprié, les développeurs peuvent mieux contrôler le comportement dimensionnel des éléments sur une page web. Expérimentez avec ces modèles pour déterminer celui qui s'adapte le mieux à vos besoins de conception.