Jak zapobiec zmianie szerokości lub wysokości właściwości wypełnienia w CSS?

Tworzę witrynę za pomocą DIVs. Wszystko działa, chyba że utworzę DIV. Tworzę je w ten sposób (przykład):

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

Gdy dodam padding-leftwłaściwość, szerokość DIVzmian zmieni się na 220 pikseli, a chcę, aby pozostała na poziomie 200 pikseli.

Załóżmy, że tworzę inny DIVo anotherdivdokładnie takiej samej nazwie newdivi umieszczam go w środku, newdivale newdivnie ma wypełnienia i anotherdivma padding-left: 20px. Dostaję to samo, newdivszerokość będzie wynosić 220 pikseli.

Jak mogę rozwiązać ten problem?

Dodaj nieruchomość:

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

Uwaga: To nie będzie działać w przeglądarce Internet Explorer poniżej wersji 8.

Umieść div w swoim newdiv za pomocą width: autoimargin-left: 20px

Usuń wypełnienie z newdiv.

Strona modelu W3 Box ma dobre informacje.

Spróbuj tego

box-sizing: border-box;

Jeśli chcesz wciąć tekst w div bez zmiany rozmiaru div, użyj CSS text-indentzamiast padding-left.

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

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

<br>

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

po prostu dodaj box-sizing: border-box;

kiedy dodam właściwość padding-left, szerokość DIV zmienia się na 220px

Tak, to jest dokładnie zgodne ze standardami. Tak to powinno działać.

Załóżmy, że tworzę inny DIV o nazwie innydiv dokładnie taki sam jak newdiv, i umieszczam go w newdiv, ale newdiv nie ma dopełnienia, a inny div ma dopełnienie-lewo: 20px. Rozumiem to samo, szerokość newdiv wyniesie 220 pikseli;

Nie, newdiv pozostanie szeroki na 200 pikseli.

po prostu zmień szerokość div na 160px, jeśli masz wypełnienie 20px, to dodaje 40px do szerokości diva, więc musisz odjąć 40px od szerokości, aby utrzymać div wyglądający normalnie i nie zniekształcony z dodatkową szerokością na nim i twój tekst wszystko zawalił.