Comment puis-je faire apparaître la bordure d'un DIV à l'intérieur de ses dimensions ?

Faire apparaître des bordures à l'intérieur des éléments DIV

Dans la conception Web, comprendre comment les éléments interagissent et se comportent est crucial. Un problème courant rencontré par les développeurs est de placer des bordures à l'intérieur d'un élément DIV tout en conservant ses dimensions souhaitées.

Le comportement par défaut de CSS consiste à placer la bordure sur le bord extérieur de l'élément, augmentant ainsi sa largeur et sa hauteur. Pour contrer cela, la propriété box-sizing entre en jeu. En définissant box-sizing : border-box, la bordure est incluse dans les spécifications de largeur et de hauteur de l'élément, ce qui donne une représentation précise des dimensions prévues.

Voici un exemple pour illustrer ce concept :

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;
}

div + div {
    border: 10px solid red;
}

Dans cet exemple, le premier DIV a une propriété box-sizing définie sur border-box, lui donnant une largeur et une hauteur de 100 px, y compris la bordure de 20 px. En revanche, le deuxième DIV n'a aucune propriété de dimensionnement de boîte définie, ce qui entraîne une bordure qui s'étend au-delà des dimensions spécifiées de l'élément.

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!