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

Sur CSS 2 vous avez dû envelopper le div dans un autre (veuillez noter que vous ne devez pas définir width:100% pour l'élément interne et le laisser s'étendre automatiquement) :

var width=$("#test").width();
$("#result").html('Javascript says: The inner Width of element is '+width);

#wrapper{
  width:300px;
}
#test{
  border:2px solid #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrapper">
   <div id="test">&nbsp;</div>
</div>

<br>
<div id="result"></div>

sur CSS 3 utiliser la taille des boîtes :

#test{
  width:300px;
  border:2px solid #000000;
  box-sizing:boder-box;
    }

<div id="test">&nbsp;</div>