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

Question

[hajdoz43]

Прошу прощения за нубский вопрос. Верстал очень давно - было моим хобби. Сейчас решил повторить.
Каким способом сейчас принято позиционировать элементы между собой по вертикали?
Допустим, дана разметка:

<div>
 <img href="">
 <h2>text</h2>
 <p>paragraphe</p>
</div>

Нужно задать расстояние между элементами img, h2 и p по вертикали. Каким образом сейчас это делают? Заранее очень благодарен.

Answer 1

[Хороший UI]

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

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

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

Comments

[hajdoz43]

Огромное спасибо!

Answer 2

[Антон Спирин]

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

h2 {
  margin-bottom: 24px;
}

Comments

[hajdoz43]

Огромное спасибо!

Answer 3

[ljutaev]

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

Comments

[hajdoz43]

Огромное спасибо!

Answer 4

[monochromer]

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

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

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

Comments

[hajdoz43]

Огромное спасибо!