Есть ли причина, по которой добавление добавляет размер элемента?

Ответ 1

Существуют две разные так называемые "бокс-модели", одна добавляет отступы (и границы) к указанному width, а другая - нет. С появлением CSS3 вы можете удачно переключаться между двумя моделями. Точнее, поведение, которое вы ищете, может быть достигнуто путем указания

box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 200px;

в вашем CSS-блоке. Затем в современных браузерах div всегда будет иметь ширину 200 пикселей независимо от того, что. Дополнительные сведения и список поддерживаемых браузеров см. В этом руководстве.

Изменить: WRT ваше правление относительно того, почему традиционная модель коробки такая, какая она есть, Wikipedia на самом деле предлагает некоторую проницательность:

До HTML 4 и CSS очень мало элементов HTML поддерживали как границу, так и дополнение, поэтому определение ширины и высоты элемента было не очень спорным. Однако он варьировался в зависимости от элемента. Атрибут ширины HTML таблицы определяет ширину таблицы, включая ее границу. С другой стороны, атрибут ширины HTML изображения определяет ширину самого изображения (внутри любой границы). Единственным элементом поддержки дополнения в те ранние дни была ячейка таблицы. Ширина для ячейки определялась как "предлагаемая ширина для содержимого ячейки в пикселях, исключая заполнение ячейки".

CSS вводил маржу, границу и дополнение для многих других элементов. Он принял ширину определения по отношению к контенту, границе, маржи и дополнению, аналогичным таковой для ячейки таблицы. С тех пор это стало известно как модель коробки W3C.

Ответ 2

Причина, почему это так, заключается в том, что технически ширина элементов должна применяться к контенту, а не к контейнеру.

Согласно спецификации CSS1, выпущенной консорциумом World Wide Web (W3C) в 1996 году и пересмотренной в 1999 году, когда ширина или высота явно указаны для любого элемента уровня блока, она должна определять только ширину или высоту видимый элемент, с последующим дополнением, границами и полями.

Подробная информация об этом поведении *

* Отказ от ответственности: Да, это мой собственный блог, и я думаю, что я подробно описал модель ящика, поэтому я ставил ее как ссылку.

Ответ 3

Заполнение предполагается в дополнение к заданной ширине объекта.

См. спецификацию CSS 2.1 для модели ящиков.

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

Я не читал атрибут box-model, но считая, что alex прав, тогда в будущем вы сможете выбрать между двумя способами интерпретации дополнения.

Ответ 4

Если размер увеличивается с заполнением, он работает по назначению. В браузерах с моделями с короткими коробками, такими как старые версии Internet Explorer, div будет иметь ширину в 100 пикселей, но это неправильное обращение с CSS.

http://www.w3schools.com/css/css_boxmodel.asp

Ответ 5

Если модель окна не работает таким образом, как бы вы справились с заполнением вокруг изображения? Вы предпочли бы, чтобы размер элемента img с дополнением не соответствовал размерам пикселя изображения? Или что заполнение покрывает изображение?

Лучше, чтобы поведение по умолчанию состояло в том, что на ширину контейнера не влияют отступы или значения полей.

Ответ 6

Если ваш ящик находится внутри поля, удалите внутреннюю ширину блока (тот, у которого есть дополнение), и это устранит проблему.

Ответ 7

"Если модель коробки не работает таким образом, как бы вы справились с заполнением вокруг изображения? Вы предпочли бы, чтобы размер элемента img с заполнением не соответствовал размерам пикселя изображения? Или что заполнение покрывает изображение?" "

Прежде всего, любой хороший веб-разработчик знал бы лучше, чем помещать изображение в контейнер, где он не подходит. Это означает, что 101. Если заполнение не позволяет изображение, изображение или дополнение должны быть изменены. Чисто и просто. Таким образом, упомянутый выше аргумент неисправен.

Заполнение - внутренняя настройка, внутренняя к границам контейнера. Поэтому, когда что-то находится внутри этого контейнера, и вы увеличиваете заполнение контейнера, элемент (-и) внутри этого контейнера должен быть закодирован, поэтому его можно уменьшить в размере.

Само слово "padding" говорит все. Можете ли вы представить, добавила ли ИБП дополнение к своим ящикам, чтобы защитить содержимое внутри, только чтобы узнать, что размер коробки увеличивается! Смешно, правда? Конечно, это является! Прокладка предназначена для добавления пространства вокруг внутренней части контейнера БЕЗ разрыва и расширения контейнера по высоте или ширине.

Это браузеры, такие как mozilla, gecko и opera, которые имеют сломанные модели, а не IE. Модель коробки, которую реализует "консорциум", в лучшем случае ошибочна и создает угрозу для веб-разработчиков.

Если "консорциум" реализовал ту же самую коробчатую модель, что и IE, то разработчикам было бы намного проще с колонками наших веб-страниц. Думаю, вы должны согласиться со мной по этому поводу. Простой и простой.

Я так устал от людей, говорящих, что IE хуже. Я могу дать массу примеров, когда IE держится сильным, в то время как более дешевые браузеры, такие как firefox, ломаются под давлением.

Мои два цента. Ненавидите меня, если хотите, но то, что я говорю, - здравый смысл и ничего больше.