Comment puis-je ajouter une bordure à une division sans augmenter sa taille ?

Bordure imbriquée dans un div

Pour incorporer une bordure dans un élément div sans étendre ses dimensions, utilisez la propriété box-sizing. Par défaut, les navigateurs considèrent la bordure et le remplissage comme faisant partie du contenu de l'élément, augmentant ainsi la taille de l'élément pour les accueillir. Cependant, définir box-sizing sur border-box indique au navigateur d'inclure la bordure dans la taille globale de l'élément, garantissant ainsi qu'elle reste cohérente quelle que soit la largeur de la bordure.

Dans votre exemple, vous pouvez appliquer le style suivant :

div {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

Avec ce style, la bordure sera placée à 1 pixel dans les bords du div, sans altérer ses dimensions globales. Cela résout le problème de devoir effectuer des calculs supplémentaires pour ajuster la largeur de la bordure.

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!