Справочник макетирования
| Приём | Где нужен | Проверка |
|---|---|---|
width: min(...) | Контейнер страницы. | Контент не прилипает к краям. |
margin-inline: auto | Центрирование контейнера. | Блок стоит по центру. |
padding-block | Вертикальный ритм секций. | Секции не слипаются. |
display: inline-block | Кнопки до Flexbox. | Можно задать padding и line-height. |
position: sticky | Липкая шапка. | Не перекрывает контент без нужного отступа. |
Как работает контейнер — наглядно
Контейнер ограничивает ширину контента и центрирует его. Сравните блок без контейнера (растянут на всю ширину) и с контейнером (центральная колонка с полями).
Без контейнера — на всю ширину:
контент
С контейнером — центр, max-width:
контент
📄 lesson-21/container.css
.container {
width: min(100% - 2rem, 1120px);
margin-inline: auto; /* центрирует: равные auto-поля слева и справа */
}