Для того чтобы установить равное расстояние между блоками, а также сделать высоту блоков пропорциональной их содержимому, можно использовать некоторые подходы в CSS и HTML. Вот один из способов, который может помочь:
### 1. Использование CSS Flexbox
Flexbox позволяет легко управлять расстоянием между элементами. Вот пример кода:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Равное расстояние между блоками</title>
<style>
.container {
display: flex;
flex-direction: column;
gap: 20px; /* Задаем равное расстояние между блоками */
}
.block {
background-color: lightblue;
padding: 10px;
border: 1px solid #ccc;
flex-grow: 1; /* Блоки растягиваются по высоте */
}
</style>
</head>
<body>
<div class="container">
<div class="block" style="height: 50px;">Содержимое 1</div>
<div class="block" style="height: 100px;">Содержимое 2</div>
<div class="block" style="height: 75px;">Содержимое 3</div>
</div>
</body>
</html>
```
### Объяснение кода:
1. **Flexbox**: Используем `display: flex;` и `flex-direction: column;` для расположения блоков в колонку.
2. **Gap**: Свойство `gap` задает равное расстояние между блоками. В нашем примере это 20px.
3. **Flex-grow**: Свойство `flex-grow: 1;` делает блоки пропорциональными по высоте, позволяя им занимать более высокие позиции в зависимости от их содержимого.
### 2. Использование CSS Grid (альтернативный вариант)
Еще один способ — это использование CSS Grid:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Равное расстояние между блоками</title>
<style>
.container {
display: grid;
row-gap: 20px; /* Задаем равное расстояние между блоками */
}
.block {
background-color: lightblue;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="block" style="height: 50px;">Содержимое 1</div>
<div class="block" style="height: 100px;">Содержимое 2</div>
<div class="block" style="height: 75px;">Содержимое 3</div>
</div>
</body>
</html>
```
### Объяснение кода:
1. **Grid**: Используем `display: grid;` для создания сетки.
2. **Row-gap**: Свойство `row-gap` устанавливает расстояние между строками, тем самым создавая равные промежутки между блоками.
Оба подхода являются современными и позволяют гибко управлять расположением элементов на странице. Вы можете выбрать любой из них в зависимости от вашего проекта и предпочтений.