Css 为什么文本和文本之间存在差距；拥挤'；上面的元素是什么？

为什么这个css代码不能正常工作

我不知道“拥挤”和.pp之间的距离是如何出现的。 我所期望的是文本“拥挤”可能与div.pp非常接近

.pp{
高度：400px；
宽度：100%；
显示：内联块；
背景色：红色；
}
p{
高度：200px；
宽度：100%；
显示：内联块；
背景颜色：海蓝宝石；
}
.flex{
边缘顶部：100px；
高度：50px；
宽度：100%；
显示器：flex；
对齐项目：居中；
调整内容：灵活启动；
背景颜色：蓝色；
}

拥挤

更改

显示：内联块.pp

类，代码>到

块

.pp{
高度：400px；
宽度：100%；
显示：块；
背景色：红色；
}
p{
高度：200px；
宽度：100%；
显示：内联块；
背景颜色：海蓝宝石；
}
.flex{
边缘顶部：100px；
高度：50px；
宽度：100%；
显示器：flex；
对齐项目：居中；
调整内容：灵活启动；
背景颜色：蓝色；
}

拥挤的

这似乎发生在Chrome上，但在Firefox上却没有到内联块元素（不确定原因，但与基线对齐有关）是的，太奇怪了，如果我将div.flex的显示从“flex”改为其他，它就可以了。（只有flex和grid不正确）您可以通过单击其左侧的大灰色检查按钮接受一个答案（如果有帮助的话）。如果你愿意，你可以通过点击上面的灰色三角形给任何一个好答案的作者加上+10分