Forum : La philosophie du modèle de boite en CSS

Bonjour à tous

J'aurais aimé comprendre un phénomène qui se passe dans le code CSS notamment dans le modèle des boites CSS, en fait mon problème c'est que je n'arrive pas à comprendre la largeur width comme suit :
On sait bien que le padding rajoute des espacements de plus dans une boite d'un élément de type block exemple :
width:50px et padding: 10px alors 50+gauche10+droite10=70px comme largeur finale affichée sur l'écran.
Alors que sur une formation que j'ai achetée, le formateur a appliqué un padding sur un élement DIV normalement j'attendais que celui-ci rajouterait des marges internes dans l’élément sauf que la c'était le contraire une SOUSTRACTION sur la largeur de l'élement exemple:
width: 200px; padding:20px au lieu de 240px affiché sur l'écran, beh quand j'inspecte avec Firebug je vois que dans l'apparence la largeur s'est réduite à 160px.
C'est quoi ce phénomène bizarre
Je vous remercie par avance :-)

Huggy

Réponse acceptée

Ce doit être un pb de box-sizing

cytheria

Réponse acceptée

Tout à fait, c'est bien le box-sizing : par défaut tu as une valeur qui est le "content-box", où seul la width est prise en compte dans le calcul. Mais cette valeur tu peux la changer soit en padding-box (width + padding) ou border-box (width + padding + border).
C'est une propriété très pratique puisque elle te simplifie grandement les calculs, tu peux donc l'appliquer à toutes tes balises / id / class à l'aide de :

{
box-sizing: border-box;
}

Je te conseille le border-box car ça ne coute rien et ça t'évitera des soucis au cours de tes créations ;)

Jeflog

Auteur

Merci à vous

Huggy

Attention padding-box n'existe plus depuis la version 50 de Firefox (ni dans les autres navigateurs)

cytheria

Ah merci de l'info Huggy, j'étais pas au courant :)

La philosophie du modèle de boite en CSS

5 réponses