CSS box-sizing

Столкнулся с этим свойством, пока работал над проектом Urvanov Syntax Highlighter. Сегодня, кстати, в нём было очередной обновление, которое должно было починить редактор тем. Если кто раньше использовал Crayon, то рекомендую перейти на мой плагин.

Проблема заключалась в том, что высота панели инструментов в моей форкнутой версии плагина, задаётся в коде на основе размера шрифта. А в качестве высоты используется свойство height. Я никак не мог понять, почему это свойство не отрабатывало. В отладочной панели браузера явно было видно, что height выставился в 18, но высота блока была почему-то гораздо меньше.

Однако затем я догадался переключиться на вкладку Layout и увидел, что высота получилась 8, а высота нижней рамки 10, что в сумме очень похоже на 18. Почему же так получилось?

После беглого поиска в интернете нашёл интересное свойство box-sizing.

Внимание! Свойство box-sizing пока экспериментальное. Оно поддерживается не во всех браузерах и не во всех браузерах работает одинаково.

Фактически есть три свойства: box-sizing, -webkit-box-sizing, -moz-box-sizing. Основное свойство box-sizing, а другие два свойства специфичные для конкретных движков.

Свойство box-sizing может принимать два значения: content-box и border-box. Пример:

Значение content-box означает, что свойства width и height вычисляются только по содержимому, не включая padding, border и margin.

Значение border-box означает, что свойства width и height вычисляются включая padding и border, но без margin.

На мой взгляд, какое-то не очень хорошее свойство. Слишком неочевидное, к тому же оно ломает стандартное поведение свойств CSS. Посмотрим, что с ним будет в будущем.


Поделиться:

Добавить комментарий

Ваш адрес email не будет опубликован.