Модель коробки

Каждый элемент в CSS заключён в коробку (английское "box") и понимание поведения этих коробок — это ключ к умению создавать макеты с помощью CSS, то есть выстраивать одни элементы относительно других элементов. В этом уроке мы рассмотрим надлежащим образом коробочную модель CSS, так, чтобы вы могли решать более сложные здачи построения макетов, понимая, как она работает, и терминологию, которая к ней относится.
Необходимые условия:

Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)

Цель:

Узнать как работает коробочная модель CSS, из чего она состоит и как переключиться на альтернативную модель.

Блочные и строчные коробки

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

Если коробка определена как блочная, то она будет вести себя следующим образом:

  • Начнётся с новой строки.
  • Будет расширяться вдоль строки таким образом, чтобы заполнить всё пространство, доступное в её контейнере. В большинстве случаев это означает, что коробка станет такой же ширины, как и её контейнер, заполняя 100% доступного пространства.
  • Будет признавать свойства width и height.
  • Внешние и внутренние отступы, граница будут отодвигать от неё другие элементы.

Если не изменить намеренно тип отображения на строчный, то такие элементы, как заголовки (например, <h1>) и <p>, все используют block как свой внешний тип отображения по умолчанию.

Если коробка имеет внешний тип отображения inline, то:

  • Она не будет занимать новую строку.
  • Свойства width и height не будут применяться.
  • Вертикальные внешние и внутренние отступы, границы будут применяться, но не будут отодвигать другие строчные коробки.
  • Горизонтальные внешние и внутренние отступы, границы будут применяться и будут отодвигать другие строчные коробки.

Элемент <a>, используемый для ссылок, <span>, <em> и <strong> — всё это примеры элементов, которые будут отображаться в линию по умолчанию.

Тип коробки, применяемый к элементу, определяется значениями свойства display, такими как block и inline, и относится к внешнему значению display.

Экскурс: внутренний и внешний типы отображения

Здесь следует объяснить, что такое внутренние и внешние типы отображения. Как уже говорилось выше, коробки в CSS имеют внешний тип отображения, который определяет, блочная она или строчная.

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

Однако, мы можем изменить внутренний тип отображения, используя такие значения display как flex. Если мы установим display: flex; для элемента, внешний тип отображения примет значение block, но внутренний тип изменится на flex. Любые прямые дочерние элементы этой коробки станут гибкими (flex) объектами и будут размещены в соответствии с правилами, изложенными в спецификации Flexbox, о которой вы узнаете позже.

Примечание: Чтобы узнать больше о значениях display, и о том, как работают коробки при блочном или строчном расположении, посмотрите руководство MDN Блочное и cтрочное расположение.

Когда вы перейдёте к более подробному изучению CSS вёрстки, вы встретите flex, и другие внутренние значения, которые могут иметь ваши элементы, например grid.

Тем не менее, блочное и строчное расположение, это поведение web-элементов по умолчанию — как было сказано выше, это иногда называют нормальным потоком (normal flow), потому что при отсутствии какой-либо другой инструкции коробки имеют блочное или строчное расположение.

Примеры разных типов отображения

Давайте продолжим и рассмотрим некоторые примеры. Ниже мы имеем три разных элемента HTML, каждый из которых имеет внешний тип отображения block. Первый — это абзац, который имеет обрамление, указанное в CSS. Браузер отображает его как блочный элемент, поэтому абзац начинается на новой строке, и расширяется на всю доступную ему ширину.

Второй — это список, который свёрстан с использованием display: flex. Это устанавливает гибкое (flex) расположение для элементов внутри контейнера, однако, список сам по себе — блочный элемент и — как и абзац — расширяется на всю ширину контейнера и начинается с новой строки.

Ниже у нас есть абзац блочного типа, внутри которого есть два элемента <span>. Эти элементы по умолчанию имеют тип inline, однако один из элементов имеет класс block, для которого мы установили display: block.

 

Мы можем видеть, как строчные элементы (inline) ведут себя в следующем примере. Элементы <span> в первом абзаце строчные по умолчанию и поэтому не приводят к разрыву строки.

Мы также имеем элемент <ul>, для которого установлено display: inline-flex, что создаёт строчную коробку вокруг нескольких flex-объектов.

Наконец, у нас есть два абзаца, для которых установлено display: inline. И строчный flex-контейнер, и абзацы располагаются вместе на одной строке, а не начинаются каждый с новой строки, как они отображались бы, будучи элементами блочного уровня.

В примере вы можете заменить display: inline на display: block или display: inline-flex на display: flex для переключения между этими двумя режимами отображения.

 

Позже в этих уроках вы встретите такое понятие как гибкая (flex) вёрстка; главное, что нужно запомнить сейчас, это то, что изменение значения свойства display может изменить внешний тип отображения элемента на блочный или строчный, что меняет способ его отображения относительно других элементов в макете. 

В оставшейся части урока мы сосредоточимся на внешнем типе отображения.

Что такое модель коробки CSS?

Полностью блочная модель в CSS применяется к блочным элементам, строчные элементы используют не все свойства, определенные блочной моделью. Модель определяет, как разные части элемента — поля, границы, отступы и содержимое — работают вместе, чтобы создать объект, который вы можете увидеть на странице. Чтобы добавить дополнительную сложность элементу, используются стандартные и альтернативные блочные модели.

Составляющие элемента

Составляя блочный элемент в CSS мы имеем:

  • Поле содержимого: Область где отображается ваш контент, размер которой можно изменить с помощью таких свойств, как width и height.
  • Поле внутреннего отступа: отступы располагаются вокруг содержимого, как пустое пространство; их размер контролируется с помощью padding и связанных свойств.
  • Рамка границы: рамка оборачивает содержимое и внутренние отступы. Её размер и стиль можно контролировать с помощью border и связанных свойств.
  • Поле внешнего отступа: внешний слой, включающий в себя содержимое, внутренний отступ и границы, представляет собой пространство между текущим и другими элементами. Размер его контролируется с помощью margin и связанных свойств.

Рисунок ниже показывает эти области:

Diagram of the box model

Стандартная блочная модель CSS

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

Предположим, что в элементе есть следующий CSS определяющий width, height, margin, border, и padding:

.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

Пространство, занимаемое нашим объектом с использованием стандартной блочной модели, на самом деле будет равно по ширине 410px (350 + 25 + 25 + 5 + 5), и по высоте 210px (150 + 25 + 25 + 5 + 5), поскольку отступы и границы добавляются к размерам поля содержимого.

Showing the size of the box when the standard box model is being used.

Примечание: Внешний отступ не считается в фактическом размере объекта. Конечно, он влияет на общее пространство, занимаемое объектом на странице, но только на внешнее пространство. Область элемента заканчивается на границах — она не распространяется за них.

Альтернативная блочная модель CSS

Вы можете подумать, что довольно неудобно добавлять границы и отступы, чтобы получить реальный размер элемента, и окажетесь правы! По этой причине, спустя некоторое время после стандартной блочной модели, в CSS была введена альтернативная блочная модель. При использовании альтернативной модели, любая ширина – это ширина видимой части элемента на странице, поэтому ширина области содержимого будет равна общей ширине минус ширина границы и внутреннего отступа. Тот же CSS, который использовался выше, даст следующий результат (ширина = 350px, высота = 150px).

Showing the size of the box when the alternate box model is being used.

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

.box {
  box-sizing: border-box;
} 

Если вы хотите, чтобы все ваши элементы использовали альтернативную блочную модель, что является распространенным выбором среди разработчиков, установите свойство box-sizing для элемента <html>, затем настройте все элементы для наследования этого значения (inherit), как показано на фрагменте ниже. Если вы хотите понять, что стоит за этим, смотрите статью the CSS Tricks article on box-sizing.

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

Примечание: Интересный факт - Internet Explorer по умолчанию использовал альтернативную блочную модель без доступного механизма для переключения.

Играем с блочными моделями

В примере ниже, вы можете видеть 2 объекта. Оба имеют класс .box, который дает им одинаковые параметры width, height, margin, border, и padding. Единственное различие в том, что второй объект объявлен по альтернативной блочной модели.

Можете ли вы изменить размер второго объекта (добавляя CSS в класс .alternate) чтобы ишрина и высота совпали с первым блоком?

 

Примечание: Вы можете найти решение этой задачи здесь.

Использование инструментов разработчика в браузере для просмотра блочных моделей

Инструменты разработчика вашего браузера могут значительно облегчить понимание блочной модели. Если вы проверяете элемент в инструментах разработчика Firefox, вы можете увидеть размер элемента, а также его поле, отступы и границу. Проверка элемента таким способом отличный способ выяснить, действительно ли размер вашего блока такой, какой вы думаете!

Inspecting the box model of an element using Firefox DevTools

Примечание: Информацию об инструментах разработчика вы можете получить по этой ссылке.

Поля, отступы и границы

Вы уже видели свойства margin, padding и border в работе в приведенном выше примере. Свойства, используемые в этом примере, являются общими и позволяют нам устанавливать все четыре стороны поля одновременно. Эти параметры также имеют эквивалентные свойства, которые позволяют индивидуально управлять разными сторонами поля.

Давайте рассмотрим эти свойства более подробно.

Поле внешнего отступа (margin)

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

Мы можем контролировать все поля элемента сразу, используя свойство margin, или каждую сторону индивидуально, используя эквивалентные полные свойства:

В примере ниже, попробуйте изменить значение margin чтобы увидеть как блок смещается, создавая или удаляя пространство (если вводить отрицательные значения margin) между этим элементом и элементом его содержащим.

 

 Cхлопывание margin 

Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания полей. Если у вас есть два элемента, поля которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба зничения негативны, то сумма отрицательнных значений будет вычтена из общей суммы.

В примере ниже имеется два абзаца. Первый абзац имеет ширину margin-bottom  50 пикселей. Ширина второго параграфа — margin-top 30 пикселей. Поля схлопываются так, что в результате  margin между двумя блоками составляет 50 пикселей, а не сумму значений отдельных значений margin.

Вы можете проверить это устанавливая значения margin-top . Видимая граница между двумя параграфами не изменится — если сохранять значение в 50 пикселей в bottom-margin первого параграфа. Если вы установите значение -10px, то увидите, что margin становится 40px — происходит вычитание из положительного значения первого параграфа.

 

Существует ряд правил, которые определяют, когда поля уменьшаются, а когда нет. Для получения подробной информации см. margin collapsing. Главное, что нужно сейчас помнить, — это то, что происходит схлопывание полей. Если вы создаете пространство с полями и не получаете ожидаемого результата, вероятно, именно это и происходит. 

Границы

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

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

Вы можете установить ширину, стиль или цвет всех четырех границ сразу используя border свойства.

Чтобы установить индивидуальные свойства для каждой из четырех сторон вы можете использовать:

Для утановки ширины, стиля или цвета всех границ используйте:

Чтобы установить ширину, стиль или цвет для каждой границы индивидуально, вы можете использовать следующие свойства:

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

 

Padding

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

Вы можете контролировать значение padding для всех сторон элемента, используя padding свойство, или для каждой стороны индивидуально, используя используя следующие свойства:

Если вы измените значения padding в классе .box в примере ниже, вы можете увидеть что это изменяет положение текста относительно поля.

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

 

Блочная модель и строчные элементы

Всё, сказанное ранее, полностью применимо к блочным элементам. Некоторые из свойств могут быть также применены и к строчным (inline) элементам, например, элемент, создаваемый с помощью <span>.

В приведенном ниже примере у нас есть <span> внутри абзаца, и мы применили к нему width, height, margin, border и padding. Вы можете видеть, что ширина и высота игнорируются. Вертикальные поля, отступы и границы соблюдаются, но они не изменяют отношения другого содержимого к нашему строчному элементу, и поэтому отступ и граница перекрывают другие слова в абзаце. Горизонтальные отступы, поля и границы соблюдаются и заставят другой контент отодвинуться от нашего элемента.

 

Использование display: inline-block

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

Элемент с display: inline-block содержит ряд свойств блочного элемента, о которых мы уже знаем:

  • Применяются свойства width и height.
  • Использование padding, margin и border приведёт к тому, что другие элементы будут отодвинуты от нашего элемена.

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

В следующем примере мы добавили display: inline-block к нашему элементу <span>. Попробуйте изменить это на display: block или полностью удалить строку, чтобы увидеть разницу.

 

Это может быть полезно, когда вы хотите создать ссылку с большой областью попадания, добавив padding. <a> - это строчный элемент, такой же как <span>; вы можете использовать display: inline-block, чтобы разрешить установку отступов, что упростит пользователю переход по ссылке.

Вы довольно часто видите это на панели навигации. Приведенная ниже навигация отображается в виде строки с использованием flexbox, и мы добавили отступы к элементу <a>, также мы хотим чтобы изменялся background-color при наведении курсора на <a>. Отступы перекрывают границу элемента <ul>. Это потому, что <a> является строчным элементом.

Добавьте в правило display: inline-block с помощью селектора .links-list a, и вы увидите, как он решает эту проблему, заставляя другие элементы соблюдать отступы.

 

Проверьте свои навыки!

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

Заключение

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

В следующем уроке мы рассмотрим, как можно использовать фон и границы, чтобы сделать ваши простые блоки более интересными.

В этом модуле

  1. Каскад и наследование
  2. Селекторы CSS
  3. Модель коробки
  4. Фон и границы
  5. Обработка разных направлений текста
  6. Переполнение содержимого
  7. Значения и единицы измерения
  8. Изменение размеров в CSS
  9. Элементы изображений, форм и медиа-элементы
  10. Стилизация таблиц
  11. Отладка CSS
  12. Организация вашей CSS