CSS
Le modèle de boîte

Syntaxe

• box-sizing: paramètre ;

Paramètres

Remarques

Quel est le modèle de boîte?

Les bords

Le navigateur crée un rectangle pour chaque élément du document HTML. Le modèle de boîte décrit comment le remplissage, la bordure et la marge sont ajoutés au contenu pour créer ce rectangle.

Diagramme de la version de travail CSS2.2

Le périmètre de chacune des quatre zones est appelé un bord . Chaque arête définit une boîte.

• Le rectangle le plus interne est la zone de contenu . La largeur et la hauteur de ceci dépendent du contenu rendu de l'élément (texte, images et tout élément enfant qu'il peut avoir).
• Vient ensuite la zone de remplissage , définie par la propriété de padding . Si aucune largeur de padding n'est définie, le bord de remplissage est égal au bord du contenu.
• Ensuite, nous avons la boîte de bordure , telle que définie par la propriété border . S'il n'y a pas de largeur de border définie, le bord de la bordure est égal au bord de remplissage.
• Le rectangle le plus à l'extérieur est la zone de marge , définie par la propriété margin . S'il n'y a pas de largeur de margin définie, le bord de la marge est égal au bord de la bordure.

Exemple

div {
    border: 5px solid red;
    margin: 50px;
    padding: 20px;
}

Ce style CSS classe tous les éléments div pour avoir une bordure supérieure, droite, inférieure et gauche de 5px de largeur; une marge supérieure, droite, inférieure et gauche de 50px ; et un haut, droit, bas et gauche rembourrage de 20px . En ignorant le contenu, notre boîte générée ressemblera à ceci:

Capture d'écran du panneau Styles d'élément de Google Chrome

• Comme il n'y a pas de contenu, la région de contenu (la boîte bleue au milieu) n'a pas de hauteur ou de largeur (0px par 0px).
• La zone de remplissage par défaut a la même taille que la zone de contenu, plus la largeur de 20 pixels sur les quatre bords que nous définissons ci-dessus avec la propriété de padding (40 pixels par 40 pixels).
• La zone de bordure a la même taille que la boîte de remplissage, plus la largeur de 5 pixels que nous définissons ci-dessus avec la propriété de border (50 pixels par 50 pixels).
• Enfin, la zone de marge a la même taille que la zone de bordure, plus la largeur de 50px que nous définissons ci-dessus avec la propriété margin (ce qui donne à notre élément une taille totale de 150x150x).

Maintenant, donnons à notre élément un frère avec le même style. Le navigateur examine le modèle de boîte des deux éléments pour déterminer où, par rapport au contenu de l'élément précédent, le nouvel élément doit être positionné:

Le contenu de chacun des éléments est séparé par un espace de 150 pixels, mais les boîtes des deux éléments se touchent.

Si nous modifions ensuite notre premier élément pour ne plus avoir de marge droite, le bord de la marge droite sera dans la même position que le bord droit de la bordure et nos deux éléments ressembleront à ceci:

taille de boîte

Le modèle de boîte par défaut ( content-box ) peut être contre-intuitif, car la width / height d'un élément ne représentera pas sa largeur ou sa hauteur à l'écran dès que vous padding border styles de padding et de border à l'élément.

L'exemple suivant illustre ce problème potentiel avec content-box :

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: content-box; /* default value */
}

Puisque le remplissage sera ajouté à la largeur de la zone de texte, l'élément résultant est une zone de texte plus large que 100%.

Heureusement, CSS nous permet de changer le modèle de boîte avec la propriété de box-sizing pour un élément. Il existe trois valeurs différentes pour la propriété disponible:

• content-box : Le modèle de boîte commune - la largeur et la hauteur ne comprennent que le contenu, pas le remplissage ni la bordure

• padding-box : La largeur et la hauteur incluent le contenu et le remplissage, mais pas la bordure

• border-box : La largeur et la hauteur incluent le contenu, le remplissage ainsi que la bordure

Pour résoudre le problème de textarea ci-dessus, vous pouvez simplement modifier la propriété de box-sizing en padding-box ou border-box . border-box est le plus couramment utilisé.

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

Pour appliquer un modèle de boîte spécifique à chaque élément de la page, utilisez l'extrait de code suivant:

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

Dans cette box-sizing:border-box; codage box-sizing:border-box; n'est pas directement appliqué à * , vous pouvez donc facilement écraser cette propriété sur des éléments individuels.