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

Question

J'ai une div pour laquelle je veux spécifier une largeur et une hauteur FIXED, ainsi qu'un padding qui peut être modifié sans diminuer la largeur / hauteur de la DIV d'origine, ni l'augmenter, existe-t-il une astuce CSS pour cela, ou une alternative utilisant padding?

Answer 1

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

• {-moz-box-sizing: border-box; -webkit-box-dimensionnement: border-box; taille de la boîte: boîte-frontière; }

Cette solution peut être mise en œuvre sans utiliser de wrappers supplémentaires

Answer 2

La solution consiste à envelopper votre div rembourré , avec div externe de 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;
}
 

Answer 3

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, utiliser -webkit-box-sizing .

IE6 calcule déjà la hauteur de manière incorrecte, 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 quirks.

Answer 4

Pour obtenir un résultat cohérent sur tous les navigateurs, vous devez généralement ajouter un autre div à l'intérieur du div , sans donner de largeur explicite et un margin . Les margin simuleront padding pour la division externe.