Maison > interface Web > tutoriel CSS > Comment puis-je ajouter une bordure à une division sans augmenter sa taille ?

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

Linda Hamilton
Libérer: 2024-12-12 12:55:10
original
427 Les gens l'ont consulté

How Can I Add a Border to a Div Without Increasing Its Size?

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;
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal