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

Основы: что в коробке?

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

Блочная модель применяется ко всем из них и состоит из:

• Поле содержимого: Элемент HTML или псевдоэлемент CSS, в котором находится ваш реальный контент — текст, изображения и все, что у вас есть.
• Отступы: Пространство между содержимым и границей.
• Граница: Линия, обтекающая отступы и содержимое.
• Маржа: Пространство за пределами границы, которое отталкивает другие элементы.

Поэтому почти каждый элемент HTML внутри

, включая его, и каждый псевдоэлемент CSS представляют собой блок. «Стенки» этого блока являются вашей границей, и им можно задать толщину (или ширину. Между этим содержимым и стенками этого блока у вас есть отступы. Между этими стенками и другими блоками у вас есть поле.

Ключевые различия между встроенными и блочными элементами

Очень важно понимать ключевые различия в том, как блочная модель влияет на встроенные и блочные элементы:

1. Ширина: Элементы блока по умолчанию расширяются, заполняя свой контейнер. Встроенные элементы? Они занимают достаточно места для своего контента.

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

3. Влияние на макет: Элементы блока влияют как на горизонтальную, так и на вертикальную компоновку. Строчные элементы ориентированы на горизонтальный поток с минимальным влиянием на вертикальный интервал.

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

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

Размер окна: поле содержимого и поле границы

Свойство box-sizing управляет расчетом ширины и высоты элемента и может существенно повлиять на макет.

1. поле содержимого со встроенными элементами

Когда box-sizing: content-box применяется к строчному элементу:

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

2. поле содержимого с блочными элементами

Когда размер окна: content-box применяется к элементу блока:

• Ширина и высота: Указанная ширина или высота применяются только к области содержимого. За пределами этого добавляются отступы и границы, увеличивая общий размер элемента.
• Влияние на макет: Блочные элементы по умолчанию расширяются на всю ширину своего контейнера, если не указано иное. Отступы и границы увеличивают размер элемента, отодвигая соседние элементы дальше.

3. бордюр со встроенными элементами

Когда размер окна: border-box применяется к строчному элементу:

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

4. рамка с блочными элементами

Когда размер окна: border-box применяется к элементу блока:

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

Стоит отметить, что, хотя поле контента используется по умолчанию, поле границы считается более интуитивно понятным и обеспечивает максимальную степень контроля.

---

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

Если вам понравилась эта загрузка для Box Model, наведите указатель мыши на коробку в форме сердца в левом верхнем углу и покажите этому посту всю свою любовь!