Блочная модель
В этом уроке мы посмотрим, сколько места занимают элементы на странице и что их разделяет. Главная мысль проста: каждый элемент на странице — это прямоугольный блок, даже если его границ не видно.
Например, если задать заголовку цвет фона, окрасится вся строка страницы, а не только область за текстом. Дело в том, что фон заполняет весь блок элемента, а большинство элементов, таких как заголовки, абзацы и div, по умолчанию так же широки, как элемент, в котором они лежат (их родитель). Некоторые элементы, например strong или a, по ширине занимают ровно столько места, сколько нужно их содержимому. Почему так, мы увидим в уроке «Display и позиционирование».
Блок каждого элемента состоит из четырёх частей, если считать изнутри наружу:
- Содержимое — то, что находится в самом элементе, например текст абзаца или изображение.
- Внутренний отступ (padding) — пространство между содержимым и рамкой.
- Рамка (border) — линия вокруг содержимого и внутреннего отступа. Она может быть и невидимой.
- Внешний отступ (margin) — пространство снаружи рамки, которое отделяет элемент от соседних.
Представьте картину в рамке на стене: содержимое — это сама картина, внутренний отступ — паспарту (полоска картона между картиной и рамкой), рамка — это рамка картины, а внешний отступ — промежуток до следующей картины на стене.
В этом уроке мы научимся задавать каждую из этих частей с помощью CSS. На странице про кошку уже есть короткий файл style.css с цветами и шрифтами, которые вы знаете по предыдущим урокам. Чтобы блоки стали видны, мы пока дадим каждому элементу красную рамку. Вы увидите, что блоки заголовков занимают всю ширину, хотя текст в них короткий, а блок элемента strong ровно такой ширины, как его текст.
Совет: блок любого элемента на любом сайте (в том числе в окне предпросмотра здесь) можно рассмотреть прямо в браузере. Щёлкните элемент правой кнопкой мыши и выберите Просмотреть код (в некоторых браузерах этот пункт называется «Исследовать» или «Проверить»). Откроются инструменты разработчика, и когда вы наводите в них курсор на элемент, браузер подсвечивает на странице разными цветами его содержимое, внутренний отступ, рамку и внешний отступ.