Блоки

Блочная модель

В CSS блочная модель описывает прямоугольные блоки, которые образуются для элементов, размещённых на странице.

По сути, всё это является прямоугольником.

Вид блочной модели

Вид блочной модели

Некоторые интересные факты:

  • border-radius скругляет внешние уголки этого блока;
  • box-shadow добавляет тень к этому блоку;
  • outline и box-shadow не являются частью блока и, соответственно, не влияют на макет.

Размеры блока

Свойство box-sizing позволяет вам немного управлять моделью, применяемой для задания размеров блоков. Два возможных значения — это content-box и border-box.

content-box

По умолчанию. При вычислении размера блока добавляются padding и border.

border-box

При вычислении размера блока padding и border не учитываются.

Пример

Оба блока содержат одинаковый CSS, но у одного значение box-sizing установлено как content-box, а другого — border-box.

.box {
  height: 5em;
  width: 5em;
  padding: 1em;
  border: .25em solid
}

Вид блоков с разным значением box-sizing показан ниже.

box-sizing

В случае border-box ширина и высота .box равны 5em, именно то, что мы задали. В случае content-box ширина и высота равны 7.5em = 5+(2*1)+(2*.25), поскольку мы добавляем padding и border с каждой стороны.

Эластичные поля ввода

Одним из преимуществ применения border-box — это возможность установить отступы и ширину в разных единицах, без крайних случаев. Одним из фантастических примеров использования этого является создание эластичных полей ввода с фиксированным padding.

В приведённом ниже примере, у input задан определённый padding в единицах em и при этом мы ещё можем указать ширину в процентах (padding: .4em .55em и width: 100%, соответственно).

input[type="text"] {
  /* Эластичность */
  box-sizing: border-box;
  width: 100%;
  
  /* Стилизация */
  padding: .4em .55em;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  border: 0;
  border-radius: .25em;
  outline: none
}

Блок

  width: 75%

Настройте ширину блока и следите за размерами самого поля, который прекрасно располагается внутри блока, сохраняя фиксированный padding.

Резюмирую

Если вы хотите получить высоту и ширину, которая ведёт себя интуитивно понятным образом, послушайте Пола Ириша и вставьте это в верхнюю часть своего CSS:

*, *:before, *:after {
  -webkit-box-sizing: border-box; /* Нужно для мобильного WebKit */
  -moz-box-sizing: border-box; /* Нужно для Firefox */
  box-sizing: border-box;
}

Дальнейшее чтение

Автор и редакторы

Автор: Адам Шварц
Последнее изменение: 22.11.2015
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid