Comment puis-je rendre les bordures de division cohérentes à l'aide de CSS ?

Obtention de bordures de division cohérentes

Lors du style d'éléments div avec une bordure, l'approche CSS standard (par exemple, "border: 1px solid black" ) ajoute l'épaisseur de la bordure à la taille du div. Par exemple, une bordure de 1 px donnerait un div mesurant 102 px x 102 px au lieu des 100 px x 100 px prévus.

Exploiter la propriété « box-sizing »

Pour remédier à ce problème, CSS a introduit la propriété « box-sizing ». En définissant cette propriété sur "border-box", le navigateur traitera la largeur de la bordure comme faisant partie des dimensions du div.

Implémentation dans le code

Considérez le code suivant :

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

En spécifiant "box-sizing: border-box", le div mesure désormais 100px x 100 px, avec la bordure de 20 px incluse dans ces dimensions.

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!