web-dev-qa-db-fra.com

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

J'ai un élément <div> et je veux y placer une bordure. Je sais que je peux écrire style="border: 1px solid black", mais cela ajoute 2px de chaque côté de la div, ce qui n'est pas ce que je veux.

Je préférerais que cette bordure soit à -1 pixels du bord de la div. La div elle-même est 100px x 100px, et si j'ajoute une bordure, je dois faire quelques calculs pour que la bordure apparaisse.

Existe-t-il un moyen de faire apparaître la bordure et d’assurer que la case sera toujours de 100 pixels (y compris la bordure)?

htmlcsscss3border
443
TheMonkeyMan

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 et ci-dessus .

607
sandeep

Vous pouvez aussi 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 bordure)

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

324
caitriona

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

Bordure intérieure à travers la propriété box-shadow css

Oui, box-shadow est utilisé pour ajouter des box-shadows aux éléments. Mais vous pouvez spécifier inset shadow, qui ressemblerait à une bordure intérieure plutôt qu'à une ombre. Il vous suffit de définir les ombres horizontales et verticales sur 0px et la propriété "spread" de box-shadow sur la largeur de la bordure souhaitée. Donc, pour la bordure "intérieure" de 10 pixels, vous écririez 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 illustrant la différence entre la bordure box-shadow et la bordure "normale". De cette façon, votre bordure et la largeur de la boîte ont un total de 100 px, y compris la bordure.

En savoir plus sur box-shadow: here

Bordure de propriété contour css

Voici une autre approche, mais de cette façon, la frontière serait en dehors de la boîte. Voici n exemple . Comme le montre l'exemple ci-dessous, vous pouvez utiliser la propriété css outline pour définir une bordure n'affectant pas la largeur ni la hauteur de l'élément. De cette façon, la largeur de la bordure n'est pas ajoutée à la largeur d'un élément.

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

En savoir plus sur les grandes lignes: ici

81
Shukhrat Raimov

Yahoo! C'est vraiment possible. Je l'ai trouvé.

Pour la bordure inférieure:

div {box-shadow: 0px -3px 0px red inset; }

Pour la bordure supérieure:

div {box-shadow: 0px 3px 0px red inset; }
41
xBoss naYan

Utilisez pseudo élément :

.button {
    background: #333;
    color: #fff;
    float: left;
    padding: 20px;
    margin: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
}
<div class='button'>Hello</div>

En utilisant ::after vous stylisez le dernier enfant virtuel de l'élément sélectionné. La propriété content crée un anonyme élément remplacé .

On contient le pseudo élément en utilisant la position absolue par rapport au parent. Ensuite, vous êtes libre d’avoir un arrière-plan et/ou une bordure personnalisés à l’arrière-plan de votre élément principal.

Cette approche n’affecte pas l’emplacement du contenu de l’élément principal, ce qui est différent de l’utilisation de box-sizing: border-box;.

Considérons cet exemple:

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    border: 5px solid #f00;
    border-left-width: 20px;
    box-sizing: border-box;
}
<div class='parent'>
    <div class='button'>Hello</div>
</div>

Ici, .button width est contraint à l'aide de l'élément parent. Le réglage de border-left-width ajuste la taille de la boîte de contenu et donc la position du texte.

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
    border-left-width: 20px;
}
<div class='parent'>
    <div class='button'>Hello</div>
</div>

L'utilisation de l'approche de pseudo-élément n'affecte pas la taille de la zone de contenu.

Selon l'application, une approche utilisant un pseudo-élément peut être un comportement souhaitable ou non.

23
Gajus

Bien que des réponses aient déjà été apportées à cette question avec des solutions utilisant les propriétés box-shadow et outline, je souhaiterais en parler un peu plus à tous ceux qui sont arrivés ici (comme moi) à la recherche d'une solution pour bordure intérieure avec un décalage

Supposons donc que vous avez un noir 100px x 100px div et que vous devez l'insérer dans une bordure blanche - qui a un décalage interne de 5px (par exemple) - cela peut encore être fait avec les propriétés ci-dessus.

box-shadow

Le truc ici est de savoir que plusieurs ombres de boîte sont autorisées, où la première ombre est en haut et les ombres suivantes ont un ordre de z inférieur.

Avec cette connaissance, la déclaration box-shadow sera:

box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;

div {
  width: 100px;
  height: 100px;
  background: black;
  box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white; 
}
<div></div>

Fondamentalement, ce que dit cette déclaration est le suivant: affiche d'abord la dernière ombre (10 pixels blanche), puis affiche l'ombre noire précédente de 5 pixels supérieure.

contour avec contour-offset

Pour le même effet que ci-dessus, les déclarations sommaires seraient:

outline: 5px solid white;
outline-offset: -10px;

div {
  width: 100px;
  height: 100px;
  background: black;
  outline: 5px solid white;
  outline-offset: -10px;
}
<div></div>

NB: outline-offsetn'est pas supporté par IE si c'est important pour vous.

démo de Codepen

19
Danield

Vous pouvez utiliser les propriétés outline et outline-offset avec une valeur négative au lieu d'utiliser un border normal, pour moi:

div{
    height: 100px;
    width: 100px;
    background-color: grey;
    margin-bottom: 10px; 
}

div#border{
    border: 2px solid red;
}

div#outline{
    outline: 2px solid red;
    outline-offset: -2px;
}
Using a regular border.
<div id="border"></div>

Using outline and outline-offset.
<div id="outline"></div>
11
Wilson Delgado

Je sais que c'est un peu plus ancien, mais comme les mots clés "border inside" m'ont directement atterri ici, j'aimerais vous faire part de certaines conclusions qui méritent d'être mentionnées ici. Quand j'ai ajouté une bordure sur l'état de survol, j'ai eu les effets dont parle OP. La bordure annonce les pixels à la dimension de la boîte, ce qui la rend nerveuse. Il existe deux autres moyens de traiter ce problème qui fonctionnent également pour IE7.

1) Ayez une bordure déjà attachée à l'élément et changez simplement la couleur. De cette façon, les mathématiques sont déjà incluses.

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

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

2) Compensez votre frontière avec une marge négative. Cela ajoutera toujours les pixels supplémentaires, mais le positionnement de l'élément ne sera pas instable sur

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

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

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 est évidemment seulement si votre largeur précise est plus importante que d'avoir un balisage supplémentaire!

3
Evert

Si vous utilisez box-sizing: border-box ne signifie pas seulement border, padding, margin, etc. Tous les éléments entreront à l'intérieur de l'élément parent.

div p {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 150px;
    height:100%;
    border: 20px solid #f00;
    background-color: #00f;
    color:#fff;
    padding: 10px;
  
}
<div>
  <p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>
2
Ayyappan K

Vous pouvez regarder le contour avec offset mais cela nécessite un certain remplissage pour exister sur votre div. Ou vous pouvez absolument positionner un div de frontière à l'intérieur, quelque chose comme

<div id='parentDiv' style='position:relative'>
  <div id='parentDivsContent'></div>
  <div id='fakeBordersDiv' 
       style='position: absolute;width: 100%;
              height: 100%;
              z-index: 2;
              border: 2px solid;
              border-radius: 2px;'/>
</div>

Vous devrez peut-être jouer avec les marges de la fausse bordure pour l’adapter à votre guise.

0
Gorky

La meilleure solution multi-navigateurs (principalement pour le support IE), comme @Steve, consiste à créer un div 98px en largeur et en hauteur au lieu d’ajouter une bordure 1px autour, ou vous pouvez créer une image de fond pour div 100x100 px et tracez une bordure dessus.

0
mdesdev