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

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

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

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

Чтобы добавить сложности, существует стандартная и альтернативная модель коробки. По умолчанию браузеры используют стандартную блочную модель.

Части коробки

Создание блока в CSS у нас есть:

• Блок контента : Область, где отображается ваш контент; измените его, используя такие свойства, как inline-size и block-size или width и height .
• Отступ : Отступ размещается вокруг содержимого в виде пробела; размер его с использованием padding и связанных свойств.
• Пограничный блок : Пограничный блок оборачивает содержимое и любые отступы; размер его с помощью границы и связанных свойств.
• Поле поля : Поле — это самый внешний слой, обертывающий содержимое, отступы и границу в виде пробела между этим полем и другими элементами; размер его с использованием поля и связанных свойств.

На схеме ниже показаны эти слои:

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

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

Если предположить, что ящик имеет следующий CSS:

 .box {
  ширина: 350 пикселей;
  высота: 150 пикселей;
  поле: 10 пикселей;
  отступ: 25 пикселей;
  граница: 5px сплошной черный цвет;
}
 

Фактическое пространство , занимаемое коробкой, будет иметь ширину 410 пикселей (350 + 25 + 25 + 5 + 5) и высоту 210 пикселей (150 + 25 + 25 + 5 + 5).

Примечание: Поле не учитывается при подсчете фактического размера поля — конечно, оно влияет на общее пространство, которое поле будет занимать на странице, а только на пространство вне поля. Область блока останавливается на границе — она не выходит за пределы поля.

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

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

Чтобы включить альтернативную модель для элемента, установите на нем box-sizing: border-box :

 .box {
  box-sizing: граница-коробка;
}
 

Если предположить, что поле имеет тот же CSS, что и выше:

 .ящик {
  ширина: 350 пикселей;
  встроенный размер: 350 пикселей;
  высота: 150 пикселей;
  размер блока: 150 пикселей;
  поле: 10 пикселей;
  отступ: 25 пикселей;
  граница: 5px сплошной черный цвет;
}
 

Теперь фактическое пространство, занимаемое блоком, будет составлять 350 пикселей в линейном направлении и 150 пикселей в блочном направлении.

Чтобы использовать альтернативную блочную модель для всех ваших элементов (что является обычным выбором среди разработчиков), установите свойство box-sizing в и установите все остальные элементы, чтобы наследовать это значение:

 html {
  box-sizing: граница-коробка;
}
*,
*::до,
*::после {
  box-sizing: наследовать;
}
 

Чтобы понять основную идею, вы можете прочитать статью CSS Tricks о box-sizing.

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

В приведенном ниже примере вы видите два поля. У обоих 9 класс.0209 .box , что дает им одинаковые width , height , margin , border и padding . Единственное отличие состоит в том, что для второго блока используется альтернативная модель блока.

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

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

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

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

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

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

Поле

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

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

• margin-top
• поле справа
• нижнее поле
• поле слева

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

Сжатие полей

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

• Два положительных поля объединятся в одно поле. Его размер будет равен наибольшей индивидуальной марже.
• Два отрицательных поля будут свернуты, и будет использовано наименьшее (самое дальнее от нуля) значение.
• Если одно поле отрицательное, его значение будет равно , вычтенному из суммы .

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

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

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

Границы

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

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

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

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

• border-top
• граница правая
• нижняя граница
• граница левая

Чтобы установить ширину, стиль или цвет всех сторон, используйте:

• border-width
• с каймой
• цвет рамки

Чтобы установить ширину, стиль или цвет одной стороны, используйте одно из более детальных свойств:

• ширина верхней границы
• с каймой
• цвет верхней границы
• ширина границы справа
• бордюр справа
• граница правого цвета
• ширина нижней границы
• нижняя граница
• цвет нижней границы
• граница слева ширина
• граница левая
• граница левая

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

Заполнение

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

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

• padding-top
• правая прокладка
• набивка дна
• набивка левая

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

Все сказанное в полной мере относится и к блок-боксам. Некоторые свойства могут применяться и к встроенным блокам, например, созданным элементом .

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

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

Элемент с display: inline-block выполняет подмножество вещей, о которых мы уже знаем:

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

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

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