Какими средствами лучше всего задать отступы данным параграфам?

Question

[Blondguy]

Как лучше задать вертикальные отступы данным параграфам? Ведь они все разные

Comments

[Ragtime Kitty]

div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

[Vladislav]

Ragtime Kitty, не практичное решение, так делать не следует

[Ankhena]

Vladislav, Ragtime Kitty, да так и не получится при неизвестном контенте.
И space-between при этом не в ту сторону.

[Vladislav]

Ankhena, я и говорю, что так нельзя делать

Answer 1

[Ankhena]

Флексы или гриды как раз так и делают

Comments

[Vladislav]

Это контентная часть, тут лучше чисто через <p></p> и стилями margin

[Ankhena]

Vladislav, да, параграфы верстаются тегами <p>, это очевидно и никак не противоречит флексам и гридам.

и стилями margin

Расскажите, пожалуйста, как вы будете вычислять margin при неизвестном количестве контента в каждом абзаце?

[Vladislav]

Ankhena, я имею ввиду каждому абзацу задать параграф и сделать так p + p { margin: 15px 0 0 0;}

[Ankhena]

на скрин в вопросе посмотрите, пожалуйста, внимательно.

[Vladislav]

Ankhena, в таком случае скажу, что дизайнер перестарался :) и отступы между текстовым контентом должны быть одинаковые

[Ankhena]

Vladislav, А даже если бы они были бы одинаковыми, то это был бы нижний margin, а не верхний.

[Vladislav]

Ankhena, да, вы правы, если использовать column-count, то да

[Ankhena]

Vladislav,
Да, если дизайнер передумает на одинаковые отступы, то через columns и нижние margin.
Если нет, то обычным флексом с row или гридами.

[Blondguy]

Ankhena, то есть получается надо будет сделать 4 флекс контейнера, распределить их по две стороны и дать трём из них отступ вниз? До такого я бы не додумался, спасибо)

[Ankhena]

Blondguy, нет, конечно. Какие еще 4 флекс контейнера? О чем вы?

Один контейнер, в нем параграфы.
Контейнеру флекс или грид.
Всё.

[Ankhena]

Blondguy,

Я бы попробовала воспользоваться вариантом с columns.
Думаю, клиент предпочтет его.
Особенно, если показать как будет выглядеть вариант от дизайнера , если на одном уровне окажутся один большой абзац, а другой короткий.

[Blondguy]

Ankhena, я так и сделал, разделил на 2 столбца space-between'ом, но как задать разные отступы все таки этим параграфам?

[Ankhena]

Blondguy, там нет разных "отступов". Это просто расстояние за счет разного количества текста.
Ну и немножко кривизны рук дизайнера.
Не переживайте.
Поставьте небольшой нижний марджин всем абзацам, просто для того, чтобы не слиплись ни при каких обстоятельствах.

[Blondguy]

Ankhena, то есть сделать как-то так?

[Blondguy]

Ankhena, Извиняюсь, вот полная разметка:

[Blondguy]

Ankhena, Все, вроде бы додумался, просто поставил всем элементам минимальную высоту и поставил одинаковый отступ в 30px, вроде бы получилось нормально.

[Ankhena]

Blondguy, Не очень удобно редактировать код, выложенный скринами. Если что, правила сервиса запрещают код в таком виде.
Пользоваться песочницами типа codepen.io гораздо удобнее.

Все, вроде бы додумался, просто поставил всем элементам минимальную высоту и поставил одинаковый отступ в 30px

Гораздо проще:

https://codepen.io/AnnaSummer/pen/gOvgpEK

[Blondguy]

Ankhena, хорошо, спасибо за помощь

Answer 2

[an]

через <br/>

Comments

[Vladislav]

Костыль, в CMS заказчик замучается пилить брки

[an]

Vladislav, тогда каждому параграфу класс присваивать?

[Vladislav]

an, нет, наследование никто не отменял

[Ankhena]

an, br это тег для переноса строки, а вовсе не для отступов.
Если вам хочется поставить два br подряд, значит, вы делаете что-то не то.

Answer 3

[Edward Gricc]

лучше не бывает, есть подходящие и не подходящие способы решения любой задачи как и в жтзни лол я бы margin сделал но если они в одном блоке то падинг