Почему добавление CSS увеличивает размер элемента?

Ответ 1

Вы можете добавить box-sizing:border-box к элементу контейнера, чтобы иметь возможность указывать ширину и высоту, которые не меняются при добавлении дополнений и/или границы элемента.

См. здесь (MDN) для спецификаций.

Обновить (скопированный комментарий для ответа)

В настоящее время значение border-box поддерживается во всех основных браузерах в соответствии с Показатели MDN

Для некоторых браузеров, конечно, требуется правильный префикс, т.е. -webkit и -moz, как вы можете видеть здесь

Ответ 2

Согласно спецификациям CSS2, отображаемая ширина элемента типа ящика равна сумме его ширины, левой/правой границы и слева /right padding (левое/правое поле также входит в игру). Если ваша ячейка имеет ширину "100%", а также имеет границу, границу и дополнение, они будут влиять (увеличивать) ширину, занимаемую объектом.

Итак, если ваше текстовое пространство должно быть на 100% шире, присвойте значения ширине, краю-левому/правому, по-левому/правому и отступы-левому/правому, чтобы их сумма составляла 100%.

В CSS3 мы имеем три модели размера коробки. Вы можете использовать модель border-box:

Указанная ширина и высота (и соответствующие свойства min/max) на этот элемент определяет поле границы элемента. То есть, любой прокладка или граница, указанные на элементе, выложены и нарисованы внутри этой указанной ширины и высоты. Ширина и высота содержимого вычисляются путем вычитания ширины границы и заполнения соответствующие стороны от заданных свойств ширины и высоты.

Ответ 3

Это был беспорядок в части W3C, и различные браузеры только добавили эту сложность с их собственными версиями бокс-моделей. Лично, вместо того, чтобы думать, какой браузер или настройка CSS будут делать трюк, я просто обертываю содержимое окна в еще одну инструкцию DIV и использую поля на этом DIV, вместо того, чтобы использовать отступы, например:

<div id="container" style="width: 300px; border: 10px solid red;">
   <div id="content" style="width: 250px; margin: 25px;">
      Some content
   </div>
</div>

Хотя это работает только для контейнеров с фиксированным размером

Ответ 4

Это зависит от браузера и его реализации box model. То, что вы испытываете, - это правильное поведение.

IE традиционно ошибочно: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Ответ 5

Для более кросс-браузерного решения вы можете избежать этого поведения, обернув любой тег, который требует дополнения в другой тег с фиксированной шириной, и давая ему width: auto. Таким образом, если родитель имеет ширину x, и вы добавляете дополнение к ребенку, ребенок наследует всю ширину x, применяя заполнение правильно, не изменяя ширину родительского элемента или его собственную.

Ответ 6

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

N.B - не указывайте ширину дочернего div, потому что она увеличится, если вы добавите дополнение