Как сделать три блока одинаковой высоты в css с отступами?

@lamar 

Если вы хотите создать три блока одинаковой высоты со смещением, вы можете использовать flexbox в CSS. Вот пример кода для достижения этого:

HTML:

1
2
3
4
5

<div class="container">
  <div class="block">Блок 1</div>
  <div class="block">Блок 2</div>
  <div class="block">Блок 3</div>
</div>

CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.container {
  display: flex;
}

.block {
  flex: 1;
  margin: 10px;
  background-color: lightgray;
  border: 1px solid gray;
}

В этом примере контейнеру .container задается свойство display: flex;, чтобы расположить блоки внутри него в одну линию. Затем каждому блоку .block задается свойство flex: 1;, чтобы блоки равномерно распределялись по контейнеру. Свойство margin: 10px; добавляет отступы 10 пикселей к блокам. Можете изменить размер отступов по своему усмотрению.

@lamar 

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

HTML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div class="container">
  <div class="block">
    <p>Блок 1</p>
  </div>
  <div class="block">
    <p>Блок 2</p>
  </div>
  <div class="block">
    <p>Блок 3</p>
  </div>
</div>

CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

.container {
  display: flex;
}

.block {
  flex: 1;
  margin: 10px;
  background-color: lightgray;
  border: 1px solid gray;
  display: flex;
  align-items: center;
}

.block p {
  flex: 1;
  margin: 10px;
}

В данном примере блоки .block имеют выравнивание по центру с помощью align-items: center;. Текст внутри блока также равномерно распределяется за счет flex: 1;. При этом текст внутри блоков выравнивается по вертикали и блоки становятся одной высоты, даже если текст внутри них разный.