Box Sizing, la propriété magique !

Un article encore signé CSS ! Pour spécifier la taille d’un bloc quelconque en HTML, par exemple un
div
ou un
span
, on utilise la propriété
width
. Mais savez-vous que la taille réelle de ce bloc n’est pas la valeur de
width
?
En effet, la vraie taille d’un élément prend bien évidemment en compte les valeurs
width
et
height
, mais aussi sa bordure et son padding (la marge entre la bordure et le contenu) !
Bref du coup on ne sait plus trop qu’elle taille notre bloc fait réellement et cela peut être un peu embêtant, surtout si vous avez des contraintes et que vous voulez des tailles précises. Heureusement, ici on aime le code sans prise de tête, je vous présente une petite astuce qui va vous faire économiser des calculs et du temps ! C’est parti !