Итоги

В этом уроке мы узнали, что:

• Каждый элемент на странице — это блок из четырёх частей: содержимого, внутреннего отступа, рамки и внешнего отступа. Как картина на стене с паспарту, рамкой и промежутком до следующей картины.
• Заголовки, абзацы и div по умолчанию так же широки, как их родитель.
• В браузере щёлкните любой элемент правой кнопкой мыши и выберите Просмотреть код, чтобы увидеть его блок.
• По умолчанию width и height задают размер содержимого.
• Размеры можно задавать в пикселях (px, фиксированный размер), процентах (%, доля от родителя), vw и vh (1% ширины или высоты окна браузера) или rem (базовый размер шрифта).
• Рамка записывается как border: толщина стиль цвет, например border: 2px solid #476958. Порядок значений не важен, но без стиля (solid, dashed, dotted и так далее) рамки не будет. border-top, border-bottom и похожие свойства задают рамку только с одной стороны.
• border-radius скругляет углы, а border-radius: 50% превращает квадрат в круг.
• padding — это пространство между содержимым и рамкой, и фон элемента заливает его.
• box-sizing: border-box делает так, что width и height включают внутренний отступ и рамку. Многие таблицы стилей начинаются с * { box-sizing: border-box; }.
• margin — это прозрачное пространство снаружи рамки. Браузеры задают некоторым элементам внешний отступ по умолчанию, например 8 пикселей вокруг body.
• padding и margin принимают от одного до четырёх значений: padding: 10px (все стороны), padding: 10px 20px (верх и низ, лево и право), margin: 0 0 10px 0 (по часовой стрелке от верха).
• Вертикальные внешние отступы соседних элементов схлопываются: промежуток равен большему из них.
• margin: 0 auto центрирует элемент, у которого задана ширина.
• overflow задаёт, что происходит с содержимым, которое не помещается: visible (по умолчанию), hidden, scroll или auto (прокрутка только при необходимости).

Наша страница про кошку теперь состоит из карточек с рамками, скруглёнными углами и отступами в отцентрированной секции. Дальше вас ждёт ещё один небольшой проект, «Мини-проект: Карточка профиля», в котором вы самостоятельно примените шрифты и блочную модель. А потом в уроке «Display и позиционирование» мы выясним, почему одни элементы так же широки, как страница, а другие — только как их содержимое, и как размещать элементы точно там, где нужно.