Каким образом сейчас позиционируют элементы по вертикали?

В данном случае очень удобно будет позиционировать через флексбоксы, но надо повернуть главную ось.

1) Задаём родителю, в данном случае диву display: flex;
2) Поворачиваем главную ось с помощью flex-direction: column;
3) Задаем равномерное выравнивание контента justify-content: space-around либо justify-content: space-around;
space-around делает отступы сверху и с низу, а space-between прижимает крайние элементы к краям родителя
4) Так как мы повернули главную ось, то можно задать горизонтальную центровку через align-items: center;

Гототово :)

Пример - https://codepen.io/you_web/pen/JveOQM

Это реализация хороша тем, что сколько бы элементов в родительский флекс-контейнер вы не внесли, они автоматически будут выравниваться

Фиксированные отступы между блоками всегда задавали с помощью margin.

h2 {
  margin-bottom: 24px;
}

привет. почитай еще ету статью: https://habr.com/post/340420/

Лично я склоняюсь к 2-м способам:

1. Односторонние margin
https://csswizardry.com/2012/06/single-direction-m...

2.Использование преимущественно padding по принципу лего.
Почитать можно здесь или здесь.