css - 为什么文本 'crowded' 和上面的元素之间有空隙？

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; 更改为 .pp 类的 block

.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