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

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

出现这种错位的缘由，实际上是由于咱们编写css所使用的编辑器，给每个元素都添加了一个默认的vertical-align:baseline;属性； baseline是基线对齐的意思，基线即咱们所写的文本文档的最后一行文字的底线，好比黄色盒子的基线就是“会有期”这三个字的底线，而红盒子的基线就是“为耻”这两个字的底线，从图中咱们能够很明显的看到，这两条线是对齐了的，这就是致使错位的缘由。

要解决这个问题其实也很简单，只须要将vertical-align的值改成top、middle等其余的值就能够了。