Для расположения элементов друг под другом в CSS можно использовать свойство display с значением block или flex.
- Display: block
Это свойство превращает элемент в блочный, который занимает всю доступную ширину и переносит следующий элемент на новую строку. Пример:
<div class="block">
<p>Первый элемент</p>
<p>Второй элемент</p>
<p>Третий элемент</p>
</div>
.block p {
display: block;
}
- Display: flex
Это свойство превращает элемент в контейнер с гибкими элементами, которые могут быть выстроены в любом направлении. Пример:
<div class="flex">
<p>Первый элемент</p>
<p>Второй элемент</p>
<p>Третий элемент</p>
</div>
.flex {
display: flex;
flex-direction: column; /* выстраиваем элементы вертикально */
}
Также можно использовать свойство float, но оно не рекомендуется, так как может вызывать проблемы с выравниванием и пересечением элементов.