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

Я создаю сайт с DIV s. Все работает, за исключением случаев, когда я создаю 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.

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

Ответ 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.

Ответ 2

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

Удалите дополнение из newdiv.

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

Ответ 3

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

box-sizing: border-box;

Ответ 4

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

Ответ 5

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

Ответ 6

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

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

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

Нет, newdiv останется 200px в ширину.

Ответ 7

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