Урок 15. Блочная модель: content, padding, border, margin
⚡ Кратко
Каждый видимый элемент занимает прямоугольную область: content, padding, border и margin. Понимание этих слоёв нужно для контроля размеров и расстояний.
О чём этот урок
Каждый видимый элемент занимает прямоугольную область: content, padding, border и margin. Понимание этих слоёв нужно для контроля размеров и расстояний.
Content - внутренняя область с текстом, картинкой или другим содержимым. Свойства width и height по умолчанию задают именно размер content.
Структура урока
Теория
Разбор темы и базовых правил.
Справочник
Справочник свойств и конструкций.
Примеры
Рабочие примеры с CSS-кодом.
Старый vs Новый
Сравнение слабого и поддерживаемого подхода.
Задания
Практика для самостоятельной работы.
Решения
Проверочные ответы и критерии.
Ошибки
Типичные ошибки и диагностика.
Домашнее задание
Домашняя работа для закрепления.
Ресурсы
Документация и справочные ссылки.
Практика
- Создайте карточку с width, padding, border и margin.
- Откройте DevTools и найдите все части box model.
- Проверьте, как padding меняет фактическую ширину блока.