J'ai un élément " div> " et je veux y mettre une bordure. Je sais que je peux écrire style="border : 1px solid black"
, mais cela ajoute 2px de chaque côté du div, ce qui n'est pas ce que je veux.
Je préférerais que cette bordure soit à -1px du bord de la division. La division elle-même mesure 100px x 100px, et si j'ajoute une bordure, je dois faire des calculs mathématiques pour la faire apparaître.
Existe-t-il un moyen de faire apparaître la bordure tout en garantissant que le cadre sera toujours de 100px (bordure comprise) ?
Définissez la propriété box-sizing
sur border-box
:
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;
}
<div>Hello!</div>
<div>Hello!</div>
Cela fonctionne sur [IE8 & ; above][1].
Vous pouvez également utiliser l'ombre de la boîte comme ceci :
div{
-webkit-box-shadow:inset 0px 0px 0px 10px #f00;
-moz-box-shadow:inset 0px 0px 0px 10px #f00;
box-shadow:inset 0px 0px 0px 10px #f00;
}
Exemple ici :
(survoler pour voir la bordure)Cela ne fonctionne que dans les navigateurs modernes. Par exemple : Pas de support pour IE 8. Voir caniuse.com (fonction box-shadow) pour plus d'informations.
pour un rendu cohérent entre les nouveaux et les anciens navigateurs, ajoutez un double conteneur, l'extérieur avec la largeur, l'intérieur avec la bordure.
<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>
ceci n'est évidemment possible que si votre largeur précise est plus importante que d'avoir des balises supplémentaires !