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

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?

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.

Mettez un div dans votre newdiv avec width: autoetmargin-left: 20px

Retirez le rembourrage de newdiv.

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

Essaye ça

box-sizing: border-box;

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>

ajoutez simplement box-sizing: border-box;

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.

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é.