На прошлом уроке мы освоили селекторы, цвета и шрифты. Теперь глубже в CSS: каждый HTML-элемент на странице — это «коробка» (box). Блочная модель описывает, как устроена эта коробка: содержимое, внутренние отступы (padding), граница (border) и внешние отступы (margin). Понимание блочной модели нужно для вёрстки.
margin и padding.border и его стили.display: block, inline, inline-block.box-sizing.Изнутри наружу:
content)padding — отступ внутри элементаborder — границаmargin — отступ снаружи элемента margin
┌─────────────────────────┐
│ border │
│ ┌───────────────────┐ │
│ │ padding │ │
│ │ ┌─────────────┐ │ │
│ │ │ content │ │ │
│ │ └─────────────┘ │ │
│ └───────────────────┘ │
└─────────────────────────┘
padding и marginpadding: 20px; /* все стороны */
padding: 10px 20px; /* верх-низ | лево-право */
padding: 10px 20px 15px 5px; /* верх право низ лево (по часовой) */
margin: 20px;
margin: 0 auto; /* центрирование по горизонтали */Отдельно: padding-top, padding-right, margin-left и т.д.
borderborder: 1px solid black;
border-width: 2px;
border-style: solid; /* solid, dashed, dotted, none */
border-color: #333;
/* Одна сторона */
border-left: 4px solid blue;
border-radius: 8px; /* скругление углов */width и heightwidth: 300px;
height: 200px;
max-width: 600px; /* не больше 600px */
min-height: 100px;По умолчанию width и height задают размер контента. С box-sizing: border-box — размер всей коробки вместе с padding и border.
box-sizingbox-sizing: border-box;С border-box при width: 300px в 300px входит и padding, и border. Иначе они добавляются сверху.
display| Значение | Поведение |
|---|---|
block | Блок на всю ширину, с новой строки (div, p, h1) |
inline | В строку, не задаётся width/height (span, a) |
inline-block | В строку, но можно задать width/height |
span { display: inline-block; width: 100px; }Создай карточку: width: 300px, padding: 20px, border: 1px solid #ccc, border-radius: 10px, margin: 20px.
Центрируй карточку на странице с помощью margin: 0 auto. Убедись, что у неё задана width.
Создай два блока рядом (inline-block). У каждого — фиксированная ширина и отступы между ними.
Примени box-sizing: border-box ко всем элементам. Объясни, почему карточка с width: 300px и padding: 20px остаётся 300px в ширину.
Мы разобрали блочную модель: padding, margin, border и display. На следующем уроке закрепим HTML и CSS на практике, а затем перейдём к проекту «Визитка».
margin и padding — margin снаружи блока, padding внутри.box-sizing: border-box — ширина с padding «разъедется».margin необдуманно — возможны наложения блоков.display: block и display: inline — результат станет непредсказуемым.Создай три карточки с классом card:
padding 15px, рамка 1px, скругление 8pxinline-block или потом flexbox)Создай страницу с header и footer:
padding 20px, фоновый цветheader — нижняя рамкаfooter — верхняя рамкаmain и footer — margin 40pxСоздай класс btn: padding 12px 24px, border-radius 6px, border: none, фон и цвет текста. Сделай так, чтобы кнопка выглядела объёмно (можно добавить лёгкую тень или градиент — по желанию).
Класс container: max-width 800px, margin 0 auto, padding 0 20px. Оберни основной контент страницы в такой контейнер.
Создай блок с классом highlight-box: левая граница 4px синего цвета, padding слева 20px, светло-синий фон. Используй для цитаты или важного объявления.
Сделай карточку товара: изображение (можно placeholder), название, цена, кнопка «В корзину». Используй padding, margin, border-radius, выровняй элементы внутри.
Создай layout с двумя колонками: левая 30% ширины, правая 70%. Между ними — gap или margin. Добавь box-sizing: border-box, чтобы проценты считались корректно.