div添加display: inline-block;后添加文字盒子位置发生改变

学习记录：

在实际开发中遇到一个问题，display: inline-block;的div在其中添加文字或者其他元素都会导致盒子位置发生改变，我上网搜了一下，查到了解决方案，给inline-block的元素添加一个属性：vertical-align:middle（不知道原因）就解决了