Як запобігти зміні властивості накладки в ширину або висоту в CSS?

Я створюю сайт із DIVs. Все працює, крім випадків, коли я створюю DIV. Я створюю їх так (приклад):

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

Коли я додаю padding-leftвластивість, ширина DIVзмін змінюється на 220 пікселів, і я хочу, щоб вона залишалася на рівні 200 пікселів.

Скажімо, я створюю ще одне DIVім’я, anotherdivточно таке ж newdiv, і вкладаю його всередину, newdivале newdivне має прокладки і не anotherdivмає padding-left: 20px. Я отримую те ж саме, newdivширина буде 220 пікселів.

Як я можу виправити цю проблему?

Додати власність:

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

Примітка. Це не працюватиме в Internet Explorer нижче версії 8.

Поставте div у свій newdiv з width: autoтаmargin-left: 20px

Вийміть підкладку з newdiv.

Сторінка моделі W3 Box має хорошу інформацію.

Спробуйте це

box-sizing: border-box;

Якщо ви хочете відрізати текст у div, не змінюючи розмір div, використовуйте CSS text-indentзамість padding-left.

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

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

<br>

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

просто додати box-sizing: border-box;

коли я додаю властивість ліворуч, то ширина DIV змінюється на 220 пікселів

Так, саме за стандартами. Ось так і має працювати.

Скажімо, я створюю ще один DIV з назвою Anotherdiv, точно такий же, як newdiv, і вставте його всередину newdiv, але у newdiv немає прокладки, а в Anotherdiv є padding-left: 20px. Я отримую те ж саме, ширина newdiv буде 220px;

Ні, newdiv залишиться шириною 200 пікселів.

просто змініть свою ширину div на 160px, якщо у вас є накладка 20px, це додасть 40px додатково до ширини вашого div, тому вам потрібно відняти 40px від ширини, щоб ваш дів виглядав нормальним і не перекручувався додатковою шириною на ньому і ваш текст весь заплутався.