行内块元素在垂直方向上对齐问题

在项目中遇到了样式问题，父元素设置了display: inline-flex;，并且有align-items: start，但两个子元素在垂直方向上仍然不能对齐，而且查找元素显示的高度也不一样。而且如果我修改padding的值，一个向上跑、一个向下跑。

问题原因

是CSS中行内块元素 （inline-block、inline-flex）在垂直对齐（vertical-align）上的默认行为导致的。

本质是因为vertical-align的默认值是baseline（基线对齐），而两个子元素的padding或height变化后，各自的基线位置发生了变化，但它们仍然试图对齐基线，结果就表现为一个向上跑、一个向下跑。

inline-block元素的基线 （baseline ）是内部最后一行文本的底部（如果没有文本，则为其margin-bottom边缘）

• 当增加padding-top时，盒子整体变高，基线相对于盒子顶部下移，为了与兄弟元素的基线对齐，盒子会向下移动
• 当增加padding-bottom时，盒子底部空间变大，但基线位置不变（因为最后一行文本没变），而兄弟元素的基线较高，为了对齐，这个盒子会向上移动

解决方案

方法一：使用vertical-align: top

强制让所有子元素的顶部对齐，不再使用基线对齐

.parent > * {
  display: inline-flex;
  vertical-align: top;
}

方法二：使用Flexbox

父容器使用display: flex，子元素也不再需要 inline-block，就不会有基线对齐问题。

.parent > * {
  display: flex;
}

方法三：让子元素变成块级元素 + 浮动/定位

如果布局允许，可以直接用block并配合float或position，但不如Flexbox方便