Html CSS中的p标记弄乱了布局

无法理解发生以下情况的原因：

仅在div中添加一个p标记会导致其下降，我无法找到原因或修复此行为：

代码：

html{
框大小：边框框；
}
#箱式集装箱{
边框：5px纯黑；
框大小：边框框；
}
#框1{
背景色：红色；
显示：内联块；
宽度：100px；
高度：100px；
边框：1px纯黑；
利润率：10px；
填充：20px；
文本对齐：居中；
}
#框2{
背景颜色：蓝色；
显示：内联块；
宽度：100px；
高度：100px；
边框：1px纯黑；
利润率：10px；
填充：20px；
}
#框3{
背景颜色：黄色；
显示：内联块；
宽度：100px；
高度：100px；
边框：1px纯黑；
利润率：10px；
填充：20px；
}
p{
显示：内联；
保证金：0；
}

添加

#BoxContainer>*{vertical align:top；}

并将其修复

---

html{
框大小：边框框；
}
#箱式集装箱{
边框：5px纯黑；
框大小：边框框；
}
#BoxContainer>*{垂直对齐：顶部；}
#框1{
背景色：红色；
显示：内联块；
宽度：100px；
高度：100px；
边框：1px纯黑；
利润率：10px；
填充：20px；
文本对齐：居中；
}
#框2{
背景颜色：蓝色；
显示：内联块；
宽度：100px；
高度：100px；
边框：1px纯黑；
利润率：10px；
填充：20px；
}
#框3{
背景颜色：黄色；
显示：内联块；
宽度：100px；
高度：100px；
边框：1px纯黑；
利润率：10px；
填充：20px；
}
p{
显示：内联；
保证金：0；
}

G

是的，但导致它的不是p标记，而是“hello”文本。是的，没有p标记也会发生。停止这种情况的唯一方法是，我将p标记的位置设置为绝对位置，这样它就脱离了正常的文档流。我的问题是为什么会发生这种情况，p标记不应该只占用其父元素中的空间吗？请注意，在这个重复的问题中，对未对齐的解决方案是在这个问题中。在内联块上使用

垂直对齐：top

。谢谢您的回答。我的问题是为什么会这样，我已经有了一个解决办法。我看不出为什么div里面的文本突然占据了它外面的空间。@Zeruko，这很公平。我看到已经有一个重复的答案来解释这一点。因此，我将删除我的答案在一点