Wie verhindere ich, dass die Auffüllungseigenschaft in CSS die Breite oder Höhe ändert?

Ich erstelle eine Seite mit DIVs. Alles funktioniert, außer wenn ich einen DIV erstelle. Ich erstelle sie so (Beispiel):

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

Wenn ich die padding-leftEigenschaft hinzufüge , DIVändert sich die Breite der Eigenschaft auf 220 Pixel, und ich möchte, dass sie bei 200 Pixel bleibt.

Nehmen wir an, ich erstelle einen anderen DIVNamen anotherdiv, der genau der gleiche ist wie newdiv, und lege ihn hinein, habe newdivaber newdivkeine Polsterung und anotherdivhat padding-left: 20px. Ich bekomme das gleiche, newdivdie Breite wird 220px sein.

Wie kann ich dieses Problem beheben?

Eigenschaft hinzufügen:

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

Hinweis: Dies funktioniert in Internet Explorer unter Version 8 nicht.

Setzen Sie ein div in Ihr newdiv mit width: auto undmargin-left: 20px

Entfernen Sie die Polsterung von newdiv.

Die W3 Box-Modellseite enthält gute Informationen.

Versuche dies

box-sizing: border-box;

Wenn Sie Text innerhalb eines Divs einrücken möchten, ohne die Größe des Divs zu ändern, verwenden Sie text-indentstattdessen das CSS padding-left.

.indent {
  text-indent: 1em;
}
.border {
  border-style: solid;
}

<div class="border">
  Non indented
</div>

<br>

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

einfach hinzufügen box-sizing: border-box;

Wenn ich die Eigenschaft padding-left hinzufüge, ändert sich die Breite des DIV auf 220px

Ja, das entspricht genau den Standards. So soll es funktionieren.

Nehmen wir an, ich erstelle einen anderen DIV mit dem Namen anotherdiv, genau wie newdiv, und füge ihn in newdiv ein, aber newdiv hat keine Auffüllung und anotherdiv hat padding-left: 20px. Ich bekomme das gleiche, newdivs Breite wird 220px sein;

Nein, newdiv bleibt 200px breit.

Ändern Sie einfach Ihre Div-Breite auf 160px, wenn Sie eine Auffüllung von 20px haben. Dadurch wird die Breite Ihres Div um 40px erhöht, sodass Sie 40px von der Breite abziehen müssen, damit Ihr Div normal aussieht und nicht durch zusätzliche Breite verzerrt wird Ihr Text ist völlig durcheinander.