Что такое блочная модель?
Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 33 из 76.
В CSS каждый HTML-элемент рассматривается как прямоугольный блок в соответствии с блочной моделью (Box Model). Эта модель состоит из четырех основных частей:
- Содержимое — фактический текст, изображение или другое содержимое внутри блока.
- Padding – пространство между содержимым и границей. Оно увеличивает размер элемента, но сохраняет цвет фона внутри.
- Граница (Border) — линия, которая окружает внутренний отступ (padding) и содержимое. Она может иметь различные стили, цвета и ширину.
- Margin – Пространство снаружи границы, которое отделяет элемент от других элементов.
Понимание блочной модели помогает контролировать отступы и макет в веб-дизайне! 🚀
Попробуйте сами
В этом уроке нет задания по программированию.
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Styling with CSS
4Основы работы с текстом
Цвет текстаСемейство шрифтовРазмер шрифтаНасыщенность шрифтаВыравнивание текстаОформление текстаПовторение: Задача №1Повторение: Задача №27Блочная модель. Часть 1
Что такое блочная модель?Внутренние отступыВнешние отступыГраницыШирина и высотаКонтрольное задание
11Методы верстки
Блочные и строчные элементыОсновы позиционированияОтносительное позиционированиеАбсолютное позиционированиеФиксированное позиционированиеОсновы Z-IndexИтоговое испытание14Финальные испытания
Расположение элементовСписок фильмовСвадебное приглашениеВсплывающее уведомление