Почему между текстом «многолюдно» и элементами над ним есть разрыв?

Question

Почему этот код CSS не работает правильно?

Я не знаю, как появляется это расстояние между «переполненным» и .pp. я ожидал, что текст «переполнен» может быть очень закрыт для div.pp

.pp {
  height: 400px;
  width: 100%;
  display: inline-block;
  background-color: red;
}

.p {
  height: 200px;
  width: 100%;
  display: inline-block;
  background-color: aquamarine;
}

.flex {
  margin-top: 100px;
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: blue;
}

<div class="pp">
  <div class="p">
  </div>
  <div class="flex">
  </div>
</div>
crowded

Answer 1

изменить display: inline-block; на block для .pp класс

.pp {
  height: 400px;
  width: 100%;
  display: block;
  background-color: red;
}

.p {
  height: 200px;
  width: 100%;
  display: inline-block;
  background-color: aquamarine;
}

.flex {  
  margin-top: 100px;
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: blue;
}

<div class="pp">
  <div class="p"></div>
  <div class="flex"></div>
</div>
crowded