Какие существуют способы создания отступов между логическими блоками в веб-дизайне?

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

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