CSS Border Inside Div pas sur le bord

Question

Ce pourrait être une question simple.

J'ai une DIV et je veux mettre une bordure dessus. Oui je sais que je peux faire Style = "border: 1px black" mais cela ajoute 2px de chaque côté de la DIV qui n'est pas ce que je veux. Je préférerais que cette bordure soit -1px du bord de la div car la DIV elle-même est 100x100 et si j'ajoute une bordure alors je dois faire des maths pour faire apparaître la bordure.

Y at-il de toute façon que je puisse faire apparaître la bordure et que la boîte soit toujours à 100 px y compris la bordure.

Answer 1

Vous pouvez utiliser la propriété box-sizing pour cela. Comme ça:

 div{
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  width:100px;
  height:100px;
  border:1px solid red;
}
 

Consultez cet exemple http://jsfiddle.net/yWuhU/

C'est du travail jusqu'à IE8 et plus.

Answer 2

Vous pouvez également utiliser box-shadow 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/ (survolez pour voir la frontière)

Cela fonctionne uniquement dans les navigateurs modernes. Par exemple: Pas de support IE 8. Voir caniuse.com (fonction box-shadow) pour plus d'informations.

Answer 3

C'est probablement tardive réponse, mais je veux partager avec mes conclusions. J'ai trouvé 2 nouvelles approches à ce problème que je n'ai pas trouvé ici, dans les réponses:

Intérieure de la frontière box-shadow propriété css

Oui, box-shadow est utilisé pour ajouter de la zone-les ombres et les éléments. Mais vous pouvez spécifier inset ombre, qui la faisait ressembler à une frontière intérieure plutôt comme une ombre. Vous avez juste besoin de mettre en horizontal et vertical ombres 0px, et le "spread" propriété de l' box-shadow de la largeur de la bordure que vous voulez avoir. Donc, pour le "intérieure" bordure de 10px vous écrire ce qui suit:

div{
    width:100px;
    height:100px;
    background-color:yellow;
    box-shadow:0px 0px 0px 10px black inset;
    margin-bottom:20px;
}

Voici jsFiddle exemple qui illustre la différence entre box-shadow frontière et "normal" de la frontière. De cette façon, votre frontière et la largeur de la zone de sont en de total 100px y compris la frontière.

Plus sur box-shadow:ici

La frontière contour propriété css

Voici une autre approche, mais de cette façon, la frontière serait à l'extérieur de la boîte. Voici un exemple au lieu de 1000 mots.. Comme suit à partir de l'exemple, vous pouvez utiliser les css outline de la propriété, à la frontière qui n'affecte pas la largeur et la hauteur de l'élément. De cette façon, la largeur de la bordure n'est pas ajouté à la largeur d'un élément.

div{
   width:100px;
   height:100px;
   background-color:yellow;
   outline:10px solid black;
}

Plus sur le contour: ici

Answer 4

Je sais que c'est un peu plus vieux, mais depuis les mots-clés de la frontière "à l'intérieur" m'a débarqué directement ici, je voudrais partager quelques conclusions qui peuvent être intéressant de mentionner ici. Quand j'étais en ajoutant une bordure sur l'état de pointage, j'ai eu les effets que l'opération est en train de parler. La frontière annonces de pixels à la dimension de la boîte qui le rendait nerveux. Il y a deux manières de traiter ce qui travaillent également pour IE7.

1) Ont une frontière déjà fixé à l'élément et il suffit de changer la couleur. De cette façon, les mathématiques sont déjà inclus.

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

div:hover {
   border: 2px dashed #666;
}

2 ) Compenser la frontière avec une marge négative. Ce sera encore ajouter les pixels supplémentaires, mais le positionnement de l'élément ne sera pas jumpy sur

div {
   width:100px;
   height:100px;
   background-color: #aaa;
}

div:hover {
  margin: -2px;
  border: 2px dashed #333;
}

Answer 5

Pour un rendu cohérent entre les navigateurs nouveaux et anciens, 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>
 

c'est évidemment seulement si votre largeur précise est plus importante que d'avoir un balisage supplémentaire!