padding et dépassement

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous !

J'ai un petit problème, dont la solution est peut-être toute simple, mais je n'ai pas trouvé...

J'ai une structure comme ceci :
Code:

1 2 3 4 5 <body> <div class="content"> <p>truc</p> </div> </body>
CSS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 body { margin-left: auto; margin-right: auto; width: 900px; line-height: 1.4em; min-height: 100%; } .content{ width: 100%; background-color: #FAFAFA; padding: 1em 1em; }
Le problème est le suivant : quand je mets le padding, la div "content" dépasse la largeur du "body". Je croyais pourtant que le padding, c'était à l'intérieur :(

Merci d'avance pour vos réponses !

--- EDIT ---

Voici une illustration :
Pièce jointe 180553

Et le code en un seul fichier (j'ai des problèmes d'indentation, désolé) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> html { background-color: #424242; } body { margin-left: auto; margin-right: auto; width: 900px; line-height: 1.4em; min-height: 100%; } .content{ width: 100%; background-color: #FAFAFA; padding: 1em 1em; } .content-nopad { width: 100%; background-color: #FAFAFA; } </style> </head> <body> <div class="content"> <p>truc avec padding</p> </div> <div class="content-nopad"> <p>truc sans padding</p> </div> </body> </html>

14/06/2015, 21h27
NoSmoking
Bonjour,

Citation:

Je croyais pourtant que le padding, c'était à l'intérieur

comme tu as raison sauf que le comportement n'est pas le même sur tous les navigateurs et que le padding s'ajoute à la dimension intérieure de l’élément ainsi que la largeur de la bordure.
Pour palier cela il existe la propriété box-sizing qui avec la valeur border-box devrait te rendre heureux.
Code:

1 2 3 4 5 6 .content{ width: 100%; background-color: #FAFAFA; padding: 1em 1em; box-sizing:border-box; }
14/06/2015, 21h35
Celadon

Ah, ben ça alors ! Je n'avais jamais entendu parlé de cette propriété… j'ai dû toujours passer outre. Merci !
Et c'est stable comme propriété ?
14/06/2015, 21h38
NoSmoking

Citation:

Et c'est stable comme propriété ?

Oui mais à toi de voir si cela te convient http://caniuse.com/#feat=css3-boxsizing.