Placer la bordure à l'intérieur du div et non sur son bord

J'ai un élément " div&gt " 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) ?

alex
Question modifiée 26 janvier 2015 в 4:38
Programmation
css3 html css border
7 mars 2012 в 12:16
25 vues
Solution

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 &amp ; above][1].

[1] : http://caniuse.com/#search=box-sizing

Gajus
Réponse modifiée 22 août 2015 в 7:28
Commentaires (10)

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 : http://jsfiddle.net/nVyXS/ (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.

mkelley33
Réponse modifiée 2 août 2014 в 10:44
Commentaires (14)

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 !

Commentaires (0)