По умолчанию фактическая ширина или высота поля элемента, видимого/отображаемого на веб-странице, зависит от его ширины 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.