28172 sujets

CSS et mise en forme, CSS3

Bonjour à vous tous et merci d'avance pour votre aide.

Je me suis posé la question, car fatigué de faire du calcul.

Je m'éxplique, si je prévois un bloc de 500px sur 500px; avec un padding de 50px;
Ce bloc doit être finalement déclaré sous css: 400px sur 400px additionné à cela 100px de padding (top, bottom) et (left, right). Ce qui nous fait 500px.

Ma question est de savoir si ce comportement est normal et comment le gérer vous dans la création de vos sites.

Merci à vous,
C'est tout à fait normal, c'est ce qu'on appelle le "modèle de boite" ou box model en anglais.

Tu peux faire quelques recherches sur ces termes pour en apprendre plus. Il est bon de savoir par exemple qu'IE 6- et IE en mode quriks n'ont pas le même modèle de boîte que les autres, d'où certaines surprises.

Tu peux également utiliser une astuce reprise dans Knacss et bien d'autres outils du même genre :
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


Cette règle change le modèle de boîte, et intègre dans la largeur les paddings et les bordures. Et ô miracle, est comprise par IE8.

J'espère t'avoir renseigné, bonne continuation !!
Merci, pour cette réponse. Smiley ravi

Cela me sera bien utile pour parfaire ma technique, je consulterais sans faute au sujet des box model.

Encore merci, bonne continuation à toi aussi.