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

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

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

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

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

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