Свойство CSS3 box-sizing

Визуально блочная модель в CSS работает следующим образом:

width + padding + border = реально отображаемая ширина блока на экране

height + padding + border = реально отображаемая высота блока на экране

Немного странно, но к этому быстро привыкаешь. В IE6 и ниже все иначе (для общего развития углубимся в историю):

Границы и отступы переместились внутрь, 'врезавшись' в ширину/высоту блока, вместо того чтобы его расширить.

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

Почему так неудобна современная реализация - поясню на примере. Допустим вы имеете на странице блочный элемент. Ширина блока-родителя равна 500 пикселям. Элемент-ребенок автоматом получит 100% ширину блока-родителя, то есть 500px, без дополнительного CSS. Так работают элементы блоки. Но скажем вы добавили 10 пиксельный отступ и 2 пиксельную границу дочернему блоку. Элемент-ребенок 'ужмется' на 12 пикселей с каждой стороны. В то же время видимый блок по-прежнему будет равен 500 пикселям. Теперь, если вы явно выставите ширину блока-ребенка в 100%, то этим блок-ребенок расширится и выйдет за пределы блока-родителя. Ширина блока станет равна 500 пикселям, а благодаря отступам и границам видимая (общая) ширина блока станет равна 524 пикселям.

Если вы захотите чтобы дочерний блок соприкасался с краями блока-родителя, то вам у дочернего блока понадобиться выставить ширину в 476px. Но что если вы делаете резиновый дизайн - у вас появилась серьезная проблема. Скажем вместо родительских 500 пикселей вы используете 72%. Какой сейчас должна быть ширина блока-ребенка, чтобы ребенок касался краев блока-родителя? С текущей блочной моделью ответа нет. Проценты перемешиваются с пиксельными значениями, что не есть хорошо. Значение в 95,2% для ширины внутреннего блока будет работать только если у родителя ширина всегда равна 500 пикселям, но если она станет больше (например при резиновом дизайне), то элемент-ребенок станет уже, а если меньше, то элемент-ребенок станет шире.

В случае с блоками div напрашивается очевидное решение - не использовать 100% ширину. Этим мы решаем вышеописанную проблему. Однако, есть очень важный элемент, которому действительно необходима 100% ширина и этот элемент - textarea.

Элемент textarea проигнорирует объявление display:block, ширина элемента textarea определяется атрибутом col или свойством width c фиксированным значением. Для резинового макеты, вы, вероятно, захотите иметь резиновый texatrea. И это правильно со всех точек зрения.

Чтобы достичь того что мы хотим нам потребуется 100% ширина и основанные на пикселях значения свойств padding и border - кажется, что достичь этого невозможно. Нереально!

Ответ лежит в начале нашего повествования - в блочной модели. Если бы могли заставить границы и отступы элемента textarea входить в 100% ширину элемента, а не расширять его, проблемы бы не было. Вы не знаете как это сделать? Способ есть!

Свойство CSS3 box-sizing позволяет сделать то, что мы хотим. Значение border-box (в отличие от значения по умолчанию content-box) позволяет включить значения отступов и границ (но не полей) в общее значение свойства width или height. Теперь мы можем смело использовать 100% ширину, пиксельные значения для отступов и границ, и все буде выглядеть превосходно.

textarea { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

Поддержка

• Chrome (любой): box-sizing
• Opera 8.5+: box-sizing
• Firefox (любой): -moz-box-sizing
• Safari 3: -webkit-box-sizing (без префикса в 5.1+ версиях)
• IE8+: box-sizing

Свойство box-sizing работает с min-width / max-width / min-height / max-height за одним исключением: Firefox. До 17 версии firefox свойства min-height и max-height не соблюдали box-sizing. Баг был решен в 17 версии.

Пример формирования блока с объявлением box-sizing: border-box и без

Удачного применения

По материалам box sizing