Comment « box-sizing : border-box » affecte-t-il la taille d'un élément HTML avec une bordure ?

Bordures intérieures et extérieures

Lorsque vous stylisez un élément HTML avec une bordure, il est essentiel de prendre en compte l'endroit où la bordure est positionnée par rapport au dimensions de l'élément. Par défaut, les bordures CSS sont placées à l'extérieur de l'élément, ajoutant de la largeur des deux côtés.

Maintenir la taille du div avec Box-Sizing

Pour garantir que les dimensions d'un div restent inchangées lorsqu'une bordure est ajoutée, la propriété box-sizing entre en jeu. Le définir sur border-box inclut la bordure dans la largeur et la hauteur spécifiées de l'élément.

Implémentation CSS

Voici un exemple CSS qui démontre l'effet de box- dimensionnement :

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

Dans cet exemple, le div a une bordure de 20px. Sans box-sizing : border-box, le div aurait une largeur totale de 140px (100px pour le contenu et 20px pour la bordure de chaque côté). Cependant, avec box-sizing: border-box, la bordure est incluse dans la largeur spécifiée de 100 px, garantissant que la largeur réelle du div reste de 100 px.

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!