Ajouter une bordure à une div. Augmenter la largeur de la div.

Question

J'ai un div comme ci-dessous, sa largeur est de 300px, puis j'y ajoute une bordure de 2px, ma question est la suivante : la bordure de 2px fait que la largeur de l'image est de 300px. div soit 302px ?

Gracias

.test{
  width:300px;
  height:auto;
  background-color:#A8F9C0;
  float:left;
  border:2px solid black;
}

<div class="test">
</div>

Answer 1

Comme la bordure entoure toute la div, elle est présente à la fois à sa gauche et à sa droite : vous devez compter sa largeur deux fois. La largeur finale sera donc de 300 + 2*2 = 304px.

Answer 2

Ce que vous avez découvert est la base du modèle de boîte CSS.

Vous pouvez jouer avec en utilisant le box-sizing qui a deux valeurs possibles :

1. content-box (par défaut)
2. border-box

content-box Par défaut. Les propriétés de largeur et de hauteur (et les propriétés min/max) n'incluent que le contenu. Les bordures, le padding et les marges ne sont pas inclus

border-box Les propriétés width et height (et les propriétés min/max) incluent le contenu, le padding et la bordure, mais pas la marge.

( fuente : W3Schools.com)

Par défaut, la bordure s'ajoute à la largeur/hauteur de votre conteneur.

Voyez ce qui se passe lorsque vous utilisez border-box :

.test{
  width:300px;
  height:auto;
  background-color:#A8F9C0;
  float:left;
  border:2px solid black;
  box-sizing: border-box;
}

<div class="test">
</div>

Cela permet de s'assurer que la largeur reste la même et qu'elle inclut la bordure du cadre.

Answer 3

Si vous voulez le border pour être sur les 4 côtés sans augmenter la largeur de l'élément, vous pouvez utiliser aperçu à la place :

.test{
    width:300px;
    height:auto;
    background-color:#A8F9C0;
    float:left;
    outline:2px solid black;
}

<div class="test">Test</div>

Vous pouvez également utiliser un encart ombre de la boîte :

 .test{
    width:300px;
    height:auto;
    background-color:#A8F9C0;
    float:left;
    box-shadow:0 0 0 2px black inset;
}

<div class="test">Test</div>

Answer 4

La bonne et propre réponse est box-sizing: border-box; Ajoutez-le à votre test de classe et votre problème est résolu.

Answer 5

Une bordure de 2px entraîne-t-elle une largeur de div de 302px ?

Non, ce n'est pas le cas. Lorsque vous définissez la largeur d'un élément, vous définissez la zone de contenu de cet élément.

Cependant, ce à quoi vous faites référence est le largeur extérieure c'est-à-dire largeur + padding + border

Pour comprendre la différence, regardez comment les modèles de boîtes fonctionnent ici. https://developer.mozilla.org/en-US/docs/Web/CSS/width

Et ces liens.

largeur : http://api.jquery.com/width/

largeur intérieure : http://api.jquery.com/innerwidth/

largeur extérieure : http://api.jquery.com/outerwidth/

Santé et bon codage !