inline-block导致的错位问题详解

如图：想要让黄、红两个盒子水平排列，方法有很多，有position定位，float浮动，实在不行还有弹性盒display：flex；还有一种方法就是display：inline-block；将其变成行内块元素，便可以水平排列，但是问题就出现在了这里，当我们设置display：inline-block；后会出现下图的情况

出现这种错位的原因，其实是因为我们编写css所使用的编辑器，给每一个元素都添加了一个默认的vertical-align:baseline;属性；baseline是基线对齐的意思，基线即我们所写的文本文档的最后一行文字的底线，比如黄色盒子的基线就是“会有期”这三个字的底线，而红盒子的基线就是“为耻”这两个字的底线，从图中我们可以很明显的看到，这两条线是对齐了的，这就是导致错位的原因。
要解决这个问题其实也很简单，只需要将vertical-align的值改为top、middle等其他的值就可以了。