Несколько способов создания отступов между логическими блоками в веб-дизайне:

• Использование CSS-свойств margin и padding. 5 Margin создаёт пространство снаружи элемента, отодвигая соседние блоки, а padding формирует внутренний отступ от границ до контента. 5 При этом внешний отступ всегда больше внутреннего. 3
• Пространственная система. 3 Общий размер блока, предназначенного для размещения контента, делится на равные части. 3 При этом кратная клетка (миниблок) принимается за условную «единицу блока», после чего веб-дизайнер приступает к настройке отступов. 3
• Система вертикальных отступов. 4 Для её использования в специальных инструментах, например, в скетче, есть библиотека со стандартным набором вертикальных отступов. 4 Когда дизайнер понимает, какие отступы ему понадобятся, он берёт символы из библиотеки и подгоняет под свои высоты и цвета. 4 Потом расставляет вертикальные отступы по странице и группирует всё в папку. 4
• Применение display: flex или grid к родительскому контейнеру. 5 Эти значения автоматически отключают схлопывание margin у дочерних элементов, сохраняя точные значения отступов. 5