Столкнулся с этим свойством, пока работал над проектом 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. Пример:
|
1 2 3 4 5 |
div { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } |
Значение content-box означает, что свойства width и height вычисляются только по содержимому, не включая padding, border и margin.
Значение border-box означает, что свойства width и height вычисляются включая padding и border, но без margin.
На мой взгляд, какое-то не очень хорошее свойство. Слишком неочевидное, к тому же оно ломает стандартное поведение свойств CSS. Посмотрим, что с ним будет в будущем.