web-dev-qa-db-fra.com

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

Je crée un site avec DIVs. Tout fonctionne, sauf lorsque je crée une DIV. Je les crée comme ceci (exemple):

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

Lorsque j'ajoute la propriété padding-left, la largeur de DIV devient 220px et je souhaite qu'elle reste à 200px.

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

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

htmlcsscss3padding
213
Sam

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: Ce ne fonctionnera pas dans Internet Explorer sous la version 8.

366
Pramod

Mettez une div dans votre newdiv avec width: auto et margin-left: 20px

Supprimez le rembourrage de newdiv.

La page de modèle W3 Box contient de bonnes informations.

39
rvarcher

Essaye ça

box-sizing: border-box;
24
Ajay Gupta

Si vous souhaitez mettre du texte dans une div sans en modifier la taille, utilisez CSS text-indent au lieu de padding-left.

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

<br>

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

ajoutez simplement box-sizing: border-box;

8
Felix Wong

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

Oui, c'est exactement selon les normes. C'est comme ça que ça doit fonctionner.

Supposons que je crée une autre DIV nommée anotherdiv exactement de la même manière que newdiv et que je la mette à l'intérieur de newdiv mais que newdiv n'a pas de rembourrage et que anotherdiv a padding-left: 20px. Je reçois la même chose, la largeur de newdiv sera de 220 pixels;

Non, newdiv restera 200 pixels de large.

1
Guffa