Html 需要解释为什么向div添加内容会使其改变位置

我有三个div并排放置。当我试图在中间div（或任何div）中放置一个标题（或任何元素）时，该div向下浮动。为什么会这样？ 用于div的CSS I：

    div {
      display: inline-block;
      background-color: lightgray;
      height: 600px;
      width: 300px;
   }

---

将

*{box size:border box}

添加到CSS中。它定义了如何计算元素的宽度和高度。

通过添加HTML标记来澄清您的问题。