CSS Удобная блочная модель с box-sizing: border-box

Эта заметка — вольный перевод статьи Пола Айриша * { box-sizing: border-box } FTW.

Неудобная и нелюбимая многими особенность CSS — это связь width и padding в блочной модели. Потому что эта самая особенность заставляет нас при верстке высчитывать и подгонять значение ширины блока (width), с учетом отступов внутри него (padding). Ведь если нам нужно сверстать блок шириной 200 пикселей с отступом внутри него в 20 пикселей со всех сторон, то нужно подгонять css-свойства так, чтобы width был равен 160px, а padding: 20px.

Гораздо удобнее было бы, чтобы общая ширина блока равнялась 200 пикселям даже если мы укажем width: 200px и padding: 20px. Но, как вы знаете, блочная модель в CSS работает не так. О истории развития блочной модели можно почитать здесь.

И для того, чтобы блочная модель работала так, как мы хотим, рекомендуется указать следующие css-свойства:

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Это даст такую блочную модель, которую мы желаем увидеть, при этом она будет применена ко всем DOM-элементам. К слову, многие браузеры уже применяют такую блочную модель к некоторым элементам, например к <input> и <textarea>. И применение такой блочной модели ко всем элементам — это прекрасный подход.

Если учитывать поддержку box-sizing: border-box браузерами, то все вышеописанное рекомендуется для проектов, которые не поддерживают IE версии 7 и ниже. С остальными браузерами проблем не возникнет, но нужно учитывать, что для относительно старых версий Firefox потребуется указывать css-свойство с префиксом -moz, а для большинства мобильных браузеров — с префиксом -webkit. Если же очень нужно применить такую блочную модель для IE6-7, то стоит обратить внимание на js-полифил для box-sizing.

Вы спросите, насколько это безопасно использовать в своих проектах? Абсолютно безопасно. jQuery прекрасно работает с такой блочной моделью. Поддержка браузерами превосходна. Многие проекты уже работают с такой блочной моделью по умолчанию.

Одна из распространенных в верстке задач, для которой идеально подходит такая блочная модель — это колонки. Если вы хотите использовать в макете колонки с процентным соотношением ширины (например, 30% — 50% — 20%), да еще и задать внутри колонок отступы (padding), то макет расползется, потому что суммарная ширина колонок будет больше 100%. А с border-box такой макет легко сверстать. Другой хороший пример использования такой блочной модели — когда элементу нужно задать ширину 100% и padding.

Многие могут отметить, что использование универсального селектора приведет к большой потере производительности в браузере. Но это не совсем так. Использование универсального селектора * настолько же быстро, как например использование селектора h1. Универсальный селектор будет медленным, если вы его используете, например так: .foo > *. О производительности селекторов можно прочитать в этой статье.

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