box-sizing

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

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

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

Читать дальше →