Как предотвратить изменение свойства padding ширины или высоты в CSS?

Question

Я создаю сайт с DIV с. Все работает, кроме случаев, когда я создаю DIV. Я создаю их так (пример):

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

Когда я добавляю свойство padding-left, ширина DIV меняется на 220px, и я хочу, чтобы он оставался на 200px.

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

Как я могу решить эту проблему?

Answer 1

Добавить объект:

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

Answer 2

Поместите div в ваш newdiv с width: auto и margin-left: 20px

Удалить отступы от newdiv.

На странице модели W3 Box есть хорошая информация.

Answer 3

Попробуйте это

box-sizing: border-box;

Answer 4

просто добавьте box-sizing: border-box;

Answer 5

Если вы хотите сделать отступ в тексте внутри 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>

Answer 6

когда я добавляю свойство padding-left, ширина DIV изменяется на 220px

Да, это в точности соответствует стандартам. Вот как это должно работать.

Допустим, я создаю еще один DIV с именем Точно так же, как Ньюдив, и положить его внутри Ньюдив, но Ньюдив не имеет отступов, а другой отступ слева: 20 пикселей. Я получаю то же самое вещь, ширина newdiv будет 220px;

Нет, newdiv останется шириной 200 пикселей.

Answer 7

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