Comment empêcher la propriété de remplissage de changer la largeur ou la hauteur en CSS?


227

Je crée un site avec DIVs. Tout va bien sauf quand je crée un DIV. Je les crée comme ceci (exemple):

newdiv {
    width: 200px;
    height: 60px;
    padding-left: 20px;
    text-align: left;
}

Lorsque j'ajoute la padding-leftpropriété, la largeur des DIVmodifications passe à 220 pixels et je souhaite qu'elle reste à 200 pixels.

Supposons que j'en crée un autre DIVnommé anotherdivexactement le même que newdiv, et que je le mette à l'intérieur de newdivmais newdivn'a pas de remplissage et l' anotherdiva padding-left: 20px. Je reçois la même chose, newdivla largeur de 220px.

Comment puis-je résoudre ce problème?


3
Je suis triste à dire, mais j'aime la façon dont IE gère cela ... est beaucoup plus logique pour moi ...
Nicu Surdu

Réponses:


390

Ajouter une propriété:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

Remarque: cela ne fonctionnera pas dans Internet Explorer sous la version 8.


14
C'est une excellente solution pour les bordures, mais comment cela aide-t-il pour le rembourrage?
Kato

6
C'est de la pure magie! - Il corrige le modèle de boîte que nous connaissons et détestons tous! c'est-à-dire qu'il fonctionne comme l'intuition le suggère - plutôt que les spécifications - mais pour autant que je sache ne casse aucune spécification non plus: D Cet article le clarifie bien ... stackoverflow.com/questions/779434/…
technicalbloke

2
@technicalbloke Votre lien revient à cette question.
mhenry1384

11
Oups ouais, copiez et collez le coq. C'est le lien que je voulais partager ... paulirish.com/2012/box-sizing-border-box-ftw
technicalbloke

1
Beaucoup d'entre vous devraient considérer l'astuce largeur: auto ci-dessous. Fonctionne sur tous les navigateurs, moins de code, etc.
Ryan Shillington



11

Si vous souhaitez mettre en retrait du texte dans un div sans modifier la taille du div, utilisez text-indentplutôt le CSS padding-left.

.indent {
  text-indent: 1em;
}
.border {
  border-style: solid;
}
<div class="border">
  Non indented
</div>

<br>

<div class="border indent">
  Indented
</div>


1
C'est la seule solution que j'ai trouvée qui fonctionnait pour mon div à largeur fixe. le dimensionnement de la boîte n'a pas empêché le rembourrage d'avoir un impact sur la largeur, donc merci une tonne pour avoir souligné cette petite propriété impressionnante.
Stevo

8

ajoutez simplement box-sizing: border-box;


12
C'est exactement la même chose que ce que d'autres réponses disent déjà ici.
Neil Lunn

1

lorsque j'ajoute la propriété padding-left, la largeur du DIV passe à 220 pixels

Oui, c'est exactement selon les normes. Voilà comment cela est censé fonctionner.

Disons que je crée un autre DIV nommé anotherdiv exactement comme newdiv, et le mets à l'intérieur de newdiv mais newdiv n'a pas de remplissage et un autrediv a padding-left: 20px. Je reçois la même chose, la largeur de newdiv sera de 220px;

Non, newdiv restera large de 200 pixels.


2
Guffa, ce n'est pas du tout ainsi que les normes sont censées fonctionner. Le rembourrage n'est certainement pas censé affecter les dimensions de l'élément auquel il est appliqué. Avec le plus grand respect, est-il possible que vous confondiez «rembourrage» et «marge»?
da5id

1
Oui, le rembourrage est certainement censé affecter les dimensions de l'élément. Je pense que c'est vous qui êtes confus ... comment proposez-vous que la marge affecte les dimensions de l'élément?
Guffa

En fait, vous savez, je pense que nous avons tous les deux raison dans un sens. Je suis tellement habitué à gérer les effets que j'avais complètement oublié la norme. J'ai trouvé une bonne explication ici quirksmode.org/css/box.html
da5id

Alors, mes excuses M. Guffa. Mais pour des raisons pratiques (ce qui est après tout ce dont nous parlons), mon conseil est toujours bon non?
da5id

Eh bien, vous avez raison dans la mesure où il y a un bug de modèle de boîte, mais cela ne s'applique pas à cette question ... :)
Guffa

-1

changez simplement votre largeur de div à 160px si vous avez un rembourrage de 20px, cela ajoute 40px supplémentaire à la largeur de votre div, vous devez donc soustraire 40px de la largeur afin de garder votre div normal et non déformé avec une largeur supplémentaire et votre texte tout foiré.


2
C'est la même chose que la réponse donnée par @rvarcher.
8bitjunkie
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.