Comment conserver les dimensions d'un div inchangées lors de l'ajout d'une bordure intérieure ?

Comment positionner une bordure à l'intérieur d'un div sans étendre ses dimensions ?

Lorsque vous stylisez un

élément avec une bordure, le comportement par défaut consiste à ajouter l’épaisseur de la bordure à la largeur et à la hauteur de l’élément. Cependant, vous pouvez rencontrer des scénarios dans lesquels vous souhaitez que la bordure apparaisse dans les dimensions existantes du div.

Pour obtenir cet effet, vous pouvez utiliser la propriété box-sizing et la définir sur border-box :

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

En définissant box-sizing sur border-box, la largeur et la hauteur du div incluront l'épaisseur de la bordure, garantissant que la boîte visible reste de la même taille tandis que la bordure apparaît à l'intérieur de son bords :

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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;

Copier après la connexion

}

div div {

box-sizing: border-box;
border: 10px solid red;

}

&l t;div>Bonjour !

Bonjour !

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!