Html 用于内联块div的大空白空间

我试图通过使用内联块将两个div并排放置。由于某种原因，我看到一个div上有一个很大的空白

我在家里创作了一支钢笔

有问题的div是带有class.input区域的div。如果我从.input区域css中删除display:inline块，空的空间就消失了，但是我将无法将这两个div并排放置

在不使用float的情况下，是否仍然可以解决此问题？

您可以在元素中添加垂直对齐：top，以解决对齐问题

垂直对齐特性的默认值为基线。如果您想知道它的作用，请看一看。

您可以在元素中添加垂直对齐：top，以解决对齐问题

---

垂直对齐特性的默认值为基线。如果您想知道这是怎么回事，请看一看。

如果您也能知道它发生的原因，那就太好了+1@Morpheus因为默认情况下，它们与有意义的基线对齐。谢谢你们两个。如果能知道发生这种事的原因，那就太好了+1@Morpheus因为默认情况下，它们与有意义的基线对齐。谢谢两位。

.input-area {
    vertical-align: top;
    display: inline-block;
    width: 450px;
    border: 1px solid green;
}