Есть ли причина, по которой отступы увеличивают размер элемента?

Question

Я был очень удивлен, когда обнаружил, что <div> с размером, скажем, 200px, становится шириной 220px, если вы добавите ему отступ в 10px.Это просто не имеет смысла, внешний размер не должен меняться, когда внутренняя настройка меняется.Это заставляет вас корректировать размер каждый раз, когда вы настраиваете отступ.

Я делаю что-то не так или есть причина для такого поведения?на работу, мой вопрос почему?Это логично, я не понимаю?Дает ли это какое-либо преимущество по сравнению с противоположным подходом, состоящим в том, чтобы разделить размер и отступы?

Answer 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'а. Тогда в современных браузерах div всегда будет иметь ширину 200 пикселей, несмотря ни на что. Для получения дополнительной информации и списка поддерживаемых браузеров см. это руководство .

Редактировать: ЗАПИШИТЕ ваше редактирование на почему традиционная блочная модель такая, какая есть, на самом деле Википедия предлагает некоторое понимание :

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

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

Answer 2

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

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

Подробнее об этом поведении *

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

Answer 3

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

См. Спецификацию CSS 2.1 для блочной модели .

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

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

Answer 4

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

Answer 5

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

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

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

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

Это браузеры, такие как Mozilla, Gecko и Opera, которые работают с неработающими моделями, а не IE. Блочная модель, которую реализует «консорциум», в лучшем случае ошибочна и наносит ущерб веб-разработчикам.

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

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

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

Answer 6

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

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

Answer 7

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

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