Width à  100% avec padding : Lorsque l’élément est plus large que prévu

Si l’on affecte à un élément div une largeur à 100% de son parent et que ce div à un padding:10px, on se retrouve en fait avec un div de largeur 100% + 20px !

Pas glop.

La solution pour avoir un div a 100% exactement est simple et rapide , et se résume à l’utilisation de la propriété CSS box-sizing :

div{width:100%; padding:10px;box-sizing: border-box;}