Comment changer un remplissage DIV sans affecter la largeur / hauteur?

J’ai un div que je veux spécifier une largeur et une hauteur FIXED pour, et aussi un padding qui peut être modifié sans diminuer la largeur / hauteur DIV d’origine ou l’augmenter.

La solution consiste à envelopper votre div rembourré , avec une div

HTML

CSS

 .outer, .inner { display: block; } .outer { /* specify fixed width */ width: 300px; padding: 0; } .inner { /* specify padding, can be changed while remaining fixed width of .outer */ padding: 5px; } 

Déclarez ceci dans votre CSS et vous devriez être bon:

 * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 

Cette solution peut être implémentée sans utiliser de wrappers supplémentaires

On dirait que vous cherchez à simuler le modèle de boîtier IE6. Vous pouvez utiliser la propriété CSS 3 box-sizing: border-box pour y parvenir. Ceci est supporté par IE8, mais pour Firefox, vous devez utiliser -moz-box-sizing et pour Safari / Chrome, utilisez -webkit-box-sizing .

IE6 calcule déjà la hauteur de manière incorrecte, alors vous êtes bien dans ce navigateur, mais je ne suis pas sûr à propos d’IE7, je pense qu’il calculera la hauteur de la même manière en mode Quirks.

essayer cette astuce

 div{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 

Cela obligera le navigateur à calculer la largeur en fonction de la largeur “externe” du div, cela signifie que le remplissage sera soustrait de la largeur.

Pour obtenir un résultat cohérent, vous devez généralement append une autre div dans la div et ne pas lui donner de largeur explicite et de margin . La margin simulera un padding pour le div externe.