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

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.