Html 添加文本元素会中断div布局

我有3个div显示在水平对齐的内联块中：

div {
  background:blue;
  height:200px;
  width:30%;
  margin:0px;
  padding:0px;
  border:10px solid red;
  display:inline-block;
  box-sizing:border-box
}

当我将一个文本元素添加到其中一个div中时，它会向下移动*（除非文本是

position:absolute；

）。

这是什么原因

---

使用

显示：内联块时添加
垂直对齐：顶部
。
内联块
的自然位置是
基线

您需要使用CSS将
垂直对齐：top
添加到
div
中。
vertical align
的默认属性是
baseline
，这就是为什么内容向下移动到底部的
div

这里有一个


div{
背景：蓝色；
高度：200px；
宽度：30%；
边际：0px；
填充：0px；
边框：10px纯红；
显示：内联块；
垂直对齐：中间对齐；
框大小：边框框
}
#b{}文本{
/*位置：固定*/
颜色：白色；
字体大小：20px；
}

你好
您能解释一下为什么会发生这种情况吗？文本垂直对齐的是什么？谢谢