Как сделать расстояние между блоками в css

В этой статье мы рассмотрим вопрос о том, как добавить расстояние между блоками в css. Рассмотрим примеры, используя margin и padding, а также сделаем выводы о правильном подходе к данной задаче.

Расстояние между блоками в CSS

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

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

.block1 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.block2 {
  margin-top: 10px;
  margin-bottom: 10px;
}

В примере выше задано расстояние в 10 пикселей между двумя блоками. Также можно задать расстояние для каждой стороны блока отдельно. Для этого используются свойства margin-top, margin-right, margin-bottom и margin-left:

.block1 {
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 10px;
  margin-left: 15px;
}

.block2 {
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 10px;
  margin-left: 15px;
}

В этом примере расстояние между блоками будет задано в 15 пикселей с каждой стороны. Кроме того, можно использовать функцию calc() для задания расстояния между блоками в процентах и других единицах измерения:

.block1 {
  margin-top: 10px;
  margin-bottom: calc(20% + 10px);
}

.block2 {
  margin-top: 10px;
  margin-bottom: 10px;
}

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