Отступы: снаружи и внутри

Урок 2.2 · Интерфейсы и сайты с нуля · Модуль 2. Как это выглядит: семь простых настроек · По подписке

Цель урока: Понять разницу между внутренним и внешним отступом и научиться давать блокам воздух.

Нужно знать заранее: Урок 2.1

Объяснение

Зачем это нужно: «Слипшийся» интерфейс — самая частая жалоба к сайтам и играм. Текст, прижатый к рамке, и блоки без промежутков — именно про отступы. Это две настройки, которые дают ощущение аккуратного интерфейса даже без картинок.

Как это работает: Отступов два вида, и путают их постоянно. padding — внутренний отступ: расстояние от текста до края самого блока. Он как набивка в коробке. margin — внешний отступ: расстояние от блока до соседей. Он как зазор между коробками. Записывать можно коротко: padding: 16px — со всех сторон одинаково; padding: 12px 24px — сначала сверху и снизу, потом слева и справа. То же самое с margin. Есть ещё gap — промежуток между детьми flex-контейнера. Он не заменяет padding, но часто удобнее, чем margin у каждого ребёнка.

Пример с разбором: .box { background: #e0e7ff; border: 2px solid #6366f1; padding: 16px; margin-bottom: 24px; } Рамка и фон — это границы блока. padding: 16px отодвигает текст от рамки изнутри. margin-bottom: 24px отодвигает от блока следующий абзац.

Уроки модуля 2

• 2.1 Цвет, размер и скругление (бесплатно)
• 2.2 Отступы: снаружи и внутри — вы здесь (по подписке)
• 2.3 Рамка, тень и шрифт (по подписке)
• 2.4 Семь настроек вместе: карточка (по подписке)
• 2.5 Цвет и контраст: чтобы текст читался (по подписке)
• 2.6 Шрифт: размер, насыщенность и интервал (по подписке)
• 2.7 Состояния кнопки: hover, focus, active (по подписке)
• 2.8 Разбор карточки: что поправить в оформлении (по подписке)