Блоки в CSS

В процессе перевода.

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

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

Блочные и строчные элементы

В CSS у нас есть два типа элементов - блочные и строчные. Эти характеристики описывают поведение блока по отношению к другим блокам и конструкции страницы в целом.

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

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

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

Если элемент определен как строчный, тогда:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

В примере вы можете заменить display: inline на display: block или display: inline-flex на display: 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, который использовался выше даст следующий результат (width = 350px, height = 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 

Ключевой момент который нужно понимать в отношении margins это концепция схлопывания полей . Если у вас есть два элемента, поля которых соприкасаются, и оба значения 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 свойства.

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

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

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

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

 

Padding

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

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

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

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

 

The box model and inline boxes

All of the above applies fully to block boxes. Some of the properties can apply to inline boxes too, such as those created by a <span> element.

In the example below, we have a <span> inside a paragraph and have applied a width, height, margin, border, and padding to it. You can see that the width and height are ignored. The margin, padding, and border are respected but they do not change the relationship of other content to our inline box and so the padding and border overlaps other words in the paragraph.

 

Using display: inline-block

There is a special value of display, which provides a middle ground between inline and block. This is useful for situations where you do not want an item to break onto a new line, but do want it to respect width and height and avoid the overlapping seen above.

An element with display: inline-block does a subset of the block things we already know about:

  • The width and height properties are respected.
  • padding, margin, and border will cause other elements to be pushed away from the box.

It does not, however, break onto a new line, and will only become larger than its content if you explicitly add width and height properties.

In this next example, we have added display: inline-block to our <span> element. Try changing this to display: block or removing the line completely to see the difference in display models.

 

Where this can be useful is when you want to give a link to a larger hit area by adding padding. <a> is an inline element like <span>; you can use display: inline-block to allow padding to be set on it, making it easier for a user to click the link.

You see this fairly frequently in navigation bars. The navigation below is displayed in a row using flexbox and we have added padding to the <a> element as we want to be able to change the background-color when the <a> is hovered. The padding appears to overlap the border on the <ul> element. This is because the <a> is an inline element.

Add display: inline-block to the rule with the .links-list a selector, and you will see how it fixes this issue by causing the padding to be respected by other elements.

 

Summary

That's most of what you need to understand about the box model. You may want to return to this lesson in the future if you ever find yourself confused about how big boxes are in your layout.

In the next lesson, we will take a look at how backgrounds and borders can be used to make your plain boxes look more interesting.

In this module

  1. Cascade and inheritance
  2. CSS selectors
  3. The box model
  4. Backgrounds and borders
  5. Handling different text directions
  6. Overflowing content
  7. Values and units
  8. Sizing items in CSS
  9. Images, media, and form elements
  10. Styling tables
  11. Debugging CSS
  12. Organizing your CSS