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

Free Preview
Продолжительность: 17 мин

Каждый HTML-элемент на странице можно представить в виде прямоугольного блока. Даже если элемент выглядит как текст или кнопка, для браузера он всё равно является блоком. Это представление называется блочной моделью документа (CSS Box Model).

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

Блочная модель — это алгоритм расчёта размеров каждого отдельного элемента на странице, которым браузеры пользуются при отрисовке. Каждый элемент состоит из четырёх частей:

  1. content — содержимое
  2. padding — внутренний отступ
  3. border — граница
  4. margin — внешний отступ

Чтобы точно понимать, каким в итоге получится блок и сколько места он займёт, давайте воспользуемся средствами разработчика. Откройте уже знакомую нам вкладку Elements, выберете любой элемент на странице. У вас откроется дополнительная панель для работы со стилями. На первой вкладке Styles вы сможете найти список всех примененных к элементу стилей. Здесь можно редактировать и добавлять новые CSS-свойства, что бывает удобно при отладке. Поизуйчайте эту вкладку самостоятельно, но на данный момент нас интересует вторая вкладка панели - Computed. Во вкладке Computed содержаться все стили: которые получается в результате расчета всех CSS-свойств примененных к элементу. Обратите внимание на визуальную схему в самом верху вкладки. css-box-model.png

На этой схеме указаны все 4 составляющих согласно блочной модели и их размеры. Эту картинку можно держать в голове для того чтобы понимать каким в итоге получится блок и сколько места он займёт при отрисовке. Давайте рассмотрим эти части подробнее.

Ширина и высота блоков

Содержимое блока - условное внутреннее пространство блока, где располагается контент. Его еще называют контентной областью или content в английском варианте.

Содержимому блока можно задавать свойства width и height, которые соответсвенно зададут ширину и высоту блока. Мы уже встречали их в предыдущих уроках, но не акцентировали свое внимание. По-умолчанию размеры блока подбираются автоматически по содержимому, но мы можем явно указать размеры блоков:

0

Блочные и строчные элементы, свойство display

Давайте еще раз проговорим особенности для блочных и строчных элементов.

Блочные элементы занимают всю доступную ширину родителя и всегда начинаются с новой строки, им можно задавать width, height и они могут содержать другие блочные и строчные элементы.

Строчные элементы занимают только ширину своего содержимого и не переносятся на новую строку, свойства width, height для них не работают. Строчные элементы используются только внутри текста.

То каким будет элемент, блочный или строчный, определяется с помощью CSS-свойства display. По-умолчанию оно для блочных элементов равно block, а для строчных - inline. Теоретически можно переопределить это свойство и, например, для div'а указать display:inline, но делать так не нужно - это ломает поведение элементов и делает код запутанным и неочевидным.

Существует гибридный вариант - display:inline-block. Такое значение сочетает в себе свойства и блочного и строчного элемента. Элемент располагается внутри текста в строке, но теперь ему можно задавать ширину и высоту с помощью width, height.

Внутренний отступ - padding.

Свойство padding отвечает за внутренние отступы. Это свойство задает расстояние между контентом блока и его внешними границами. На рисунке выше это область зеленого цвета.

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

Добавим к стилям из примера выше внутренние отступы:

<div>Изучаем верстку весело!</div>
<style>
  div {
    width: 200px;
    height: 200px;
    padding: 15px;
  }
</style>
html

Теперь ширина блока будет равна 200 + 15 + 15 = 230 пикселей. А высота будет равна 200 + 15 + 15 = 230 пикселей. Внутренние отступы прибавились к ширине и высоте.

Способ задания padding

Сразу отмечу, что существует несколько разных способов задавать внутренние отсупы. Запись которую мы использовали выше padding: 15px; означает, что единое значение отсупа будет добавлено ко всем четырем сторонам блока - сверху, справа, снизу, слева.

Также, мы можем использовать свойство padding с двумя значениями разделенными пробелом, например так: padding: 15px 20px;. В такой записи первое значение примениться сверху и снизу элемента (значение по вертикали), а второе - справа и слева (по горизонтали).

Существуют варианты записи также с тремя и четырьмя значениями разделенными пробелами. Запись с тремя значениями встречается довольно редко и задает отступы сверху, по-горизонтали, снизу. Более распространненный вариант запись с четырьмя значениями вида padding: 15px 20px 10px 25px;. Она определяет отступы сверху, справа, снизу, слева. Именно в таком порядке, чтобы было легче запомнить ориентируетесь на часы. Отсупы задаются от 0 часов по часовой стрелке.

Рассмотренные варианты записи являются сокращенными, здесь одним свойством мы задаем отсупы по всем сторонам, но существует способ для указания отсупов отдельно для каждой стороны. Для этого используется следующий синтаксис:

div {
  /*Отсуп сверху */
  padding-top: 10px;
  /*Отсуп снизу */
  padding-bottom: 20px;
  /*Отсуп справа */
  padding-right: 20px;
  /*Отсуп слева */
  padding-left: 40px;
}
css

Забегая вперед отмечу, что для свойства margin используются точно такие-же варианты записи.

Границы элемента - border

Каждый элемент может иметь границу. Границы также учитываются при расчете размеров элемента. Задать границы можно разными способами, самый простой из них - использовать свойство border. С его помощью можно сразу задать все настройки для границ элемента. Для этого используется следующий синтаксис border: 1px solid grey. Здесь 1px задает толщину границы, solid определяет начертание границ в виде сплошной линии, и grey - задает цвет. Все свойства разделены пробелами. Кроме такого способа можно использовать и отдельные свойства для работы с разными аспектами определения внешниго вида границ, например: border-top, border-bottom - для задания границ сверху и снизу элемента. Более подробно о стилях связанных с границами можно почитать в официальной документации MDN.

Внешние отступы - margin

Внешние отступы, за которые отвечает свойство margin, не прибавляются непосредственно к размерам элемента, но влияют на то, сколько места на странице он занимает. В отличие от padding, внешние отступы не входят в расчёт физических размеров самого элемента (его content box), но влияют на общее занимаемое им место на странице.

Как и для padding, для margin существует несколько форматов записи:

.class1 {
  margin: 10px;
}

.class2 {
  margin: 10px 20px;
}

.class3 {
  margin: 10px 20px 15px 25px;
}

.class4 {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 15px;
  margin-left: 25px;
}
css

Схлопывание внешних отступов

Схлопывание отступов (margin collapsing) - ключевое поведение margin, которое часто вызывает путаницу у начинающих разработчиков.

Схлопывание отсупов заключается в том, что при отображении двух соседних блочных элементов их margin «сливается» в один отступ и вместо суммы двух отступов отображается больший из них. Давайте рассмотрим пример:

<div class="box1">Блок 1</div>
<div class="box2">Блок 2</div>

<style>
  .box1 {
    margin-bottom: 20px;
  }

  .box2 {
    margin-top: 30px;
  }
</style>
html

Первый блок имеет отступ снизу высотой 20 пикселей, второй блок - отсуп сверху 30 пикселей. В результате из-за схлопывания отсупов между будет отступ 30 пикселей, а не 50.

Свойство box‑sizing

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

  1. content-box (это значение используется по умолчанию). При его использовании если вы выставите элементу ширину 100 пикселей, то ширина его контента будет 100 пикселей, а ширина границ и внутренних отступов при рендере будет добавлена к финальной ширине, делая элемент шире ста пикселей.
  2. border-box - второй возможный вариант. Он говорит браузеру учитывать любые границы и внутренние отступы в значениях, которые вы указываете в ширине и высоте элемента. Если вы выставите элементу ширину 100 пикселей, то эти 100 пикселей будут включать в себя границы и внутренние отступы, а контент сожмётся, чтобы выделить для них место. Обычно это упрощает работу с размерами элементов.

Давайте рассмотрим пример:

<div class="box1">Блок 1</div>
<div class="box2">Блок 2</div>

<style>
  div {
    width: 200px;
    padding: 10px;
    border: 5px solid black;
  }

  .box1 {
    box-sizing: content-box;
  }

  .box2 {
    box-sizing: border-box;
  }
</style>
html

В итоге получается такая картинка: box-sizing-example.png

В первом случае, при использовании content-box, ширина блока становится 200 + (10 х 2) + (5 х 2) = 230 пикселей, т.к. значение свойства width влияет только на content. Во втором случае свойство width задает общую ширину блока с учетом контента, внутреннего отступа и границ.

Предыдущий урокСледующий урок