По умолчанию фактическая ширина или высота поля элемента, видимого/отображаемого на веб-странице, зависит от его ширины width, высоты height и свойств padding и border. Например, если вы примените некоторые отступы padding и границы border к элементу с width: 100%, появится горизонтальная полоса прокрутки, как в примере ниже.
.box {
width: 100%;
padding: 20px;
border: 5px solid #f08080;
}Это очень распространенная проблема, с которой сталкиваются веб-разработчики. Для ее решения в CSS3 есть свойство box-sizing. Оно изменяет блочную модель CSS по умолчанию таким образом, что любые отступы padding и границы border, заданные для элемента, учитываются при расчете его ширины и высоты браузером.
.box {
width: 100%;
padding: 20px;
border: 5px solid #f08080;
box-sizing: border-box;
}Теперь полоса прокрутки исчезла.
При использовании CSS-свойства box-sizing, получающиеся ширина и высота области содержимого вычисляются путем вычитания границ border и ширины отступов padding соответствующих сторон из указанных свойств width и height.
Создание макетов с помощью Box-Sizing
Благодаря CSS-свойству box-sizing для определения размера блоков создание макета из нескольких столбцов с использованием процентов становится гораздо проще. Теперь вам не нужно беспокоиться об окончательном размере элемента при добавлении к ним отступов или границ.
В следующем примере будет создан макет из двух столбцов, где каждый столбец имеет одинаковую ширину и размещаются рядом, используя свойство float.
.box {
width: 50%;
padding: 20px;
background: #f2f2f2;
float: left;
box-sizing: border-box;
}Точно так же вы можете создавать более сложные макеты, используя эту простую технику. Вот, например, пример трехколоночной сетки:
.box {
width: 30%;
padding: 20px;
margin-left: 5%;
background: #f2f2f2;
float: left;
box-sizing: border-box;
}
.box:first-child {
margin-left: 0;
}О том, как создавать сетку на основе флексов (flex) см. Руководство по flexbox в CSS3.
