Основной CSS-интервал: пояснения к полям, отступам и зазорам

В одном из своих видео я говорил: «Никогда не используйте отступы для повторно используемых компонентов!» Некоторые из вас спрашивали: «А как же тогда создавать пространство?» В этом видео есть ответ на этот вопрос. Кроме того, я подробно расскажу, как выбирать между отступами, внутренними отступами и зазорами в CSS на примере из реальной жизни. Это не всегда просто. Давайте разберёмся! CodePen до: https://codepen.io/dmtrmrv/pen/GRajVRx CodePen после: https://codepen.io/dmtrmrv/pen/rNgjmPp Отступы — это самый простой для понимания принцип. Добавление отступов к элементу создаёт пространство снаружи, отдаляя его от других элементов. Отступы добавляют пространство между краем элемента и его содержимым. Добавляя внутренние отступы, вы гарантируете, что независимо от содержимого элемента, внутри него всегда будет одинаковое расстояние. Gap — это новое свойство, которое позволяет создавать пространство между элементами внутри контейнера Flexbox или Grid. Это очень удобно, но не всегда лучший выбор для каждого сценария. Реальные проекты более сложны, и понимание того, когда использовать margin вместо gap или padding вместо margin, имеет решающее значение. Я покажу вам на реалистичном примере, как выбрать правильное свойство CSS-интервалов. Мы начнём с макета, требующего корректировки интервалов, и к концу вы будете точно знать, как выбрать правильное свойство для каждого варианта использования. Для практики предусмотрены CodePens. Мы исправим проблемы с интервалами, добавив одинаковые межстрочные интервалы с помощью padding, обеспечив вертикальные интервалы в верхнем и нижнем колонтитулах и выбрав между margin и gap для различных компонентов. Я объясню, почему я предпочитаю определённые подходы, и вы узнаете о таких советах, как использование селектора «лоботомированная сова» для улучшения вертикального ритма и улучшения доступности навигации с помощью padding. К концу этого видео вы будете чётко понимать, как использовать margin, padding и gap в CSS для создания хорошо сбалансированных профессиональных макетов. Независимо от того, новичок ли вы или хотите усовершенствовать свои навыки, это руководство предоставит вам практические рекомендации и методы для повышения вашего уровня владения CSS. 00:00 – Введение 00:18 – Отступы 00:56 – Отступы 01:50 – Зазоры 02:34 – Лучшая демонстрация 03:10 – Создание единообразных отступов на сайте 04:16 – Увеличение вертикального пространства в колонтитулах 05:27 – Интервалы между разделами макета 06:24 – Больше никогда не используйте поля в блоках 07:27 – Вертикальный ритм с помощью интеллектуальных интервалов 10:39 – Использование отступов для создания аккуратной сетки карточек 11:09 – Тонкая настройка интервалов внутри карточек 13:33 – Улучшение доступности навигации с помощью отступов Получайте уведомления о новых видео в своей электронной почте → https://tinyurl.com/yuu8x8my Подпишитесь на меня в Твиттере:   / dmtrmrv