0

L’attribut css – Box-sizing

Bonjour les amis,

Aujourd’hui, je vous présente une astuce CSS : le Box-sizing.

C’est tout bonnement magique :) ! Tout intégrateur connait la galère de devoir calculer une taille de div en fonction des marges, des paddings et des bordures.

A vos méninges,  voici un petit problème :

mascotte_question

Y a pas plus simple ?

« Alors si je veux une div de 900 pixels de large mais que j’ai un padding de 15px à gauche et de 10 px à droite, que je rajoute une bordure de 2 px .. quelle taille je dois attribuer à ma div ? »

Deux solutions s’offrent à vous :

1 – Je fais le calcul pendant 5 minutes et à chaque nouveau problème je recommence …

2 – J’utilise la propriété box-sizing et comme par magie peu importe les paddings et les bordures en définissant une taille de 900 px ma div ne bougera pas !

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

Alors magique ou pas ?

Bon pour ne pas changer, c’est toujours pas compatible IE6 et IE7 donc au besoin on peut toujours utiliser un petit fix :

https://github.com/Schepp/box-sizing-polyfill

A bientôt.

A propos de Thibault

Thibault a écrit 17 articles sur le blog.

Les amis de nos amis sont nos amis, alors partageons !

Laissez un commentaire





Si vous êtes un vrai développeur, vous devez savoir compter.
Alors on vous met au défi !
Si vous réussissez cette épreuve, nous nous ferons une joie de lire votre commentaire.