为什么“拥挤”文本与其上方的元素之间存在间隙？

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