Как расположить блоки друг под другом CSS

Чтобы расположить блоки друг под другом в CSS, можно использовать свойство display с значением block. Блочные элементы по умолчанию имеют ширину равную 100% от ширины родительского блока и высоту, которую необходимо задавать через свойство height или максимальную высоту через свойство max-height.

Пример:

HTML:

<div class="block">Первый блок</div>
<div class="block">Второй блок</div>
<div class="block">Третий блок</div>

CSS:

.block {
  display: block; /* Установка блочного свойства */
  height: 100px; /* Задание высоты блока */
  background-color: #ccc; /* Задание цвета фона блоков */
  margin-bottom: 10px; /* Добавление отступа снизу для разделения блоков */
}

Здесь каждый блок имеет высоту 100px и цвет фона #ccc, отделены друг от друга отступом в 10px. С помощью свойства display: block; все элементы будут отображаться друг под другом.

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