Как опустить блоки вниз CSS

Если вы хотите опустить блоки вниз на странице, можно использовать свойство margin-top у блоков. Задавая положительное значение для margin-top, вы будете опускать блок вниз, а отрицательное значение — поднимать его вверх.

Пример:

<div class="box box-1">Блок 1</div>
<div class="box box-2">Блок 2</div>

.box {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  margin-top: 20px; /* задаем отступ сверху на 20px */
}

В этом примере блоки имеют класс box, к которому применено свойство margin-top: 20px;, чтобы они были опущены вниз на 20 пикселей. Если вы хотите, чтобы первый блок не был опущен вниз, можно применить к нему отрицательный отступ:

.box-1 {
  margin-top: -20px; /* задаем отрицательный отступ сверху на 20px */
}

В этом случае первый блок будет поднят вверх на 20 пикселей, а второй блок будет располагаться ниже.

Также можно использовать свойство padding-top вместо margin-top, чтобы добавить внутренний отступ сверху и одновременно опустить содержимое блоков вниз.

Пример:

.box {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  padding-top: 20px; /* задаем внутренний отступ сверху на 20px */
}

В этом случае блоки будут иметь внутренний отступ сверху на 20 пикселей, а содержимое блоков будет опущено вниз на 20 пикселей.