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

93

J'ai un div pour lequel je veux spécifier une largeur et une hauteur FIXES, ainsi qu'un remplissage qui peut être modifié sans diminuer la largeur / hauteur originale de la DIV ou l'augmenter, y a-t-il une astuce CSS pour cela, ou une alternative utilisant le remplissage?

css html Ryan
la source

Réponses:

72

La solution consiste à envelopper votre div rembourré , avec un div extérieur à largeur fixe

HTML

<div class="outer">
    <div class="inner">

        <!-- your content -->

    </div><!-- end .inner -->
</div><!-- end .outer -->

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;
}
Juraj Blahunka
la source
Je ne veux juste pas nettoyer, je ne suis pas sûr, mais cela ne fonctionnerait que pour le rembourrage horizontal, non? Comme height: auto ne remplit pas le parent comme width: auto le fait.
Jonathan Azulay
196

Déclarez cela 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 mise en œuvre sans utiliser de wrappers supplémentaires.

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

adswebwork
la source
cela fonctionne comme un charme je suis débutant il suffit de rechercher cette propriété et cela fonctionne Great Man .....
nida
1
Y a-t-il des effets secondaires dont je devrais être conscient lorsque je l'utilise?
Radi
15
Cette solution est meilleure que celle acceptée, et il est prudent de ne plus utiliser de préfixes: shouldiprefix.com/#box-sizing
fgblomqvist
@adswebwork Vous m'avez économisé une grande partie de mon temps. Je vous remercie.
Hardik Chaudhary
17

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

IE6 calcule déjà mal la hauteur, donc vous êtes bon dans ce navigateur, mais je ne suis pas sûr pour IE7, je pense qu'il calculera la hauteur de la même manière en mode bizarreries.

wsanville
la source
css3 est encore très nouveau comme l'iPad :)
Ryan
9

essayez cette astuce

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

cela forcera le navigateur à calculer la largeur selon la largeur "externe" du div, cela signifie que le remplissage sera soustrait de la largeur.

KA
la source
5
c'est la même chose que la réponse de @ adswebwork, non? J'apprécie l'explication de son fonctionnement, mais c'est probablement mieux comme commentaire
craq
1
pourquoi publier une réponse identique
Andrew
4

Pour obtenir un résultat cohérent dans le navigateur croisé, vous en ajoutez généralement un autre divà l'intérieur du divet ne donnez aucune largeur explicite, et a margin. Le marginsimulera paddingpour le div externe.

Pekka
la source