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
source

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
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
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
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
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
source