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

227

Я создаю сайт с 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.

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

html css padding Сэм
источник
3
Мне грустно говорить, но мне нравится, как IE справляется с этим ... Имеет для меня больше смысла ...
Нику Сурду

Ответы:

390

Добавить недвижимость: 

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

Pramod
источник
14
Это отличное решение для границ, но как это помогает для заполнения?
Като
6
Это чистая магия! - Это исправляет модель коробки, которую мы все знаем и ненавидим! то есть заставляет его работать так, как подсказывает интуиция, - а не спецификации - но, насколько я знаю, тоже не нарушает никаких спецификаций: D Эта статья проясняет это хорошо ... stackoverflow.com/questions/779434/…
technicalbloke
2
@technicalbloke Ваша ссылка просто возвращает вас к этому вопросу.
mhenry1384
11
Ой, да, скопируйте и вставьте член. Это ссылка, которой я хотел поделиться ... paulirish.com/2012/box-sizing-border-box-ftw
technicalbloke
1
Многие из вас должны рассмотреть ширину: авто трюк ниже. Работает в разных браузерах, меньше кода и т. Д.
Райан Шиллингтон,
26

Попробуй это

box-sizing: border-box;
Аджай Гупта
источник
11

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

mvndaai
источник
1
Это единственное решение, которое я нашел работающим для моего div с фиксированной шириной. К сожалению, размеры ящиков не помешали влиянию ширины на ширину, поэтому спасибо большое за то, что указали на это удивительное маленькое свойство.
Стево
8

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

Феликс Вонг
источник
12
Это просто точно так же, как то, что другие ответы уже говорят здесь.
Нил Ланн
1

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

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

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

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

Guffa
источник
2
Хаффа, стандарты не должны работать вообще. Заполнение определенно не должно влиять на размеры элемента, к которому оно применяется. С величайшим уважением, возможно, вы путаете «отступ» с «полем»?
da5id
1
Да, отступы определенно должны влиять на размеры элемента. Я думаю, что это вы сбиты с толку ... как вы предполагаете, что поле повлияет на размеры элемента?
Гуффа
На самом деле, вы знаете, я думаю, что мы оба правы в некотором смысле. Я так привык справляться с эффектами, что совершенно забыл стандарт. Я нашел хорошее объяснение здесь quirksmode.org/css/box.html
da5id
Итак, мои извинения мистер Гуффа. Но для практических целей (о чем мы и говорим) мой совет по-прежнему хорош, нет?
da5id
Ну, вы правы в том, что есть ошибка модели коробки, но это не относится к этому вопросу ... :)
Guffa
-1

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

Sean
источник
2
Это то же самое, что ответ @rvarcher.
8bitjunkie