padding modifie largeur

[dimb]

Bonjour à tous, en pleine reflexion sur le design, je me "débrouillais" pas mal en css/html à partir d'une base créée par moi-même. Mais j'avoue avoir plus de mal pour composer et intégré un thème sous prestashop.

 

J'ai voulu créer un "cadre" autour de mon corps de site, et j'ai trouvé un exemple dans les themes. (ici: http://addons.prestashop.com/demo/FO3162.html)

Et je remarque que quand je modifie le padding de cet exemple, la largeur du header ou du "column" ne change pas (ce qui est idéal). Ce qui semble normal vu que le padding représente (pour moi, corrigez moi si je me trompe) les marge interieur du cadre avec les elements à l'interieur (text? bloc?).

 

 

Bref, j'ai voulu essayer l'opération, et pas de soucis au niveau du cadre ou quoi que ce soit, mais à chaque fois que j'ajoute un padding, ce padding s'ajoute à la largeur de l'élement et donc le modifie. On peut essayer ici: http://demo-store.prestashop.com/fr/ et la largeur ici aussi est modifié quand on ajoute un padding au header.

 

 

Donc bref j'aime pas ne pas comprendre un truc, et peut-être ça semble simple mais je n'ai pas trouvé ce qui faisait la difference entre les 2 exemple ci-dessus. Quelqu'un aurait une expliquation quand au fait que le padding modifie la largeur sur la demo de prestashop et pas sur le template lingerie?:°.

[ricomico]

Bonjour,

 

Sur le template de lingerie, quand tu modifies le padding du header (ici "0 45px"), le visuel change aussi.

C'est normal car le padding s'ajoute à la largeur. C'est à dire que si tu a une div avec un padding de 10px et une taille de 100 px, la div prendra 120px. La propriété CSS "width" est la largeur où tu peux écrire, donc sans le padding, le border et la margin.

 

Regarde ce schéma, tu vas comprendre tout de suite : http://webdevelopmenttutorials.com/tutorialimage2.gif

"width" et "height" ne prennent pas en compte la padding