Как предотвратить изменение свойства 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

Многие из вас должны рассмотреть ширину: авто трюк ниже. Работает в разных браузерах, меньше кода и т. Д.

— Райан Шиллингтон,

39

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

Удалить обивка от newdiv.

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

— rvarcher
источник

1

Зачем использовать два div, если вы можете использовать один?

— Аарон Франке

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