为什么inline-block里面装一个元素后元素会下沉？

Question

    <div id="frame">
        <div class="item">
            <span>test</span>
        </div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

.item {
    display: inline-block;
    width: 180px;
    height: 100px;
    background-color: yellow;
}

为什么第一div会下沉？里面随便装个东西就这个样子了，为什么？

Answer 1

因为display: inline-block成了内联，inline box有一个叫做baseline的东西，想要更改很简单只要vertical-align: top;和vertical-align: bottom;，要想了解详细的话，可以看看这个

Answer 2

inline元素默认是baseline对齐，一个 inline-block 如果其中有内容，其baseline 就是最后一行文字的baseline，否则就是其 margin 下边缘。
所以，有内容文字的 baseline 对齐了 没有内容inline-block 的下边缘