Bonne comprehension box-sizing : bordures/width

Bonjour

Je voudrai être sur d'avoir bien compris
Si j'ai un bloc comprenant deux autres blocs, alignés horizontalement séparés par une gouttière

<div id="wrapper">
wrapper de 640px
       <div id="bloc1>width:300px</div>
       <div id="bloc2">width:300px margin-left:40px</div>
</div>

Si dans les css j'ai indiqué:

*,
*:before,
*:after {
    -moz-box-sizing: 	   border-box;
      -webkit-box-sizing: border-box;
		box-sizing:   border-box;
}

Cela veut bien dire que les border et les padding sont déduits des blocs?
Exemple de modification: j'ajoute une bordure de 10 px à mes trois div.
le wrapper demeure toujours à 640 px mais l'espace interieur est réduit à 620px , par contre les blocs 1 et 2 font toujours 300px.
Et par conséquent si je veux que les deux blocs soient toujours alignés horizontalement, il faut ( si je ne veux pas toucher à la taille des blocs 1 et 2) que je réduise la gouttière ( margin-left du bloc 2) à 20px?

est-ce bien cela?

Merci
Modifié par cpalo (18 Nov 2013 - 19:41)

bonsoir,

border-box, veut dire que les width et height sont les valeurs absoluées de ta boite, quelque soit les epaisseurs de bordures ou padding, les dimensions internes de la boite seront réduites d'autant que necessaire a conserver ces dimensions absolues.

Un enfant en dimensions exprimée en % seront calculéee sur l'espace interne dispo ( width - padding - border-width).

Dans ton cas , il te faut transposé les dimension en pourcentage.
ta marge de 40px sur 640px est de 16% (640/40).
tes boites devraient donc faire
100-16 / 2= 42 %.

<div id="wrapper">
wrapper de 640px (100%)
       <div id="bloc1>width:42%</div>
       <div id="bloc2">width:42% margin-left:16%</div>
</div>