Что такое блочная модель?

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 33 из 76.

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

Содержимое — фактический текст, изображение или другое содержимое внутри блока.

Padding – пространство между содержимым и границей. Оно увеличивает размер элемента, но сохраняет цвет фона внутри.

Граница (Border) — линия, которая окружает внутренний отступ (padding) и содержимое. Она может иметь различные стили, цвета и ширину.

Margin – Пространство снаружи границы, которое отделяет элемент от других элементов.

Понимание блочной модели помогает контролировать отступы и макет в веб-дизайне! 🚀

Шпаргалка

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

Содержимое — фактический текст, изображение или другое содержимое внутри области
Внутренний отступ — пространство между содержимым и границей
Граница — линия, которая окружает внутренний отступ и содержимое
Внешний отступ — пространство снаружи границы, которое отделяет элемент от других элементов

Попробуйте сами

В этом уроке нет задания по программированию.