display: inline-block 的默认垂直对齐机制
display: inline-block 是 css 中一个非常实用的属性值，它结合了块级元素（如可以设置宽度、高度、内外边距）和行内元素（如可以与其他行内元素并排显示）的特性。然而，在使用 inline-block 布局时，开发者经常会遇到元素之间出现意外垂直错位的问题。这通常源于其默认的 vertical-align 属性值——baseline。
vertical-align 属性用于设置行内元素、inline-block 元素或表格单元格的垂直对齐方式。当其值为 baseline 时，元素的基线会与其父元素的基线对齐。问题在于，不同 inline-block 元素的基线定义方式可能不同：
- 含有文本内容的 inline-block 元素： 其基线通常是其内部最后一行文本内容的基线。
- 不含文本内容的 inline-block 元素： 浏览器会为其设定一个“假想基线”，通常位于元素的底部边缘。
正是这种基线定义的差异，导致了当一行中同时存在有内容和无内容的 inline-block 元素时，它们无法按照预期进行顶部或底部对齐，从而产生视觉上的错位。
示例：观察默认行为
为了更直观地理解这种“奇怪行为”，我们来看一个具体的例子。假设我们有一组 div 元素，它们都设置为 display: inline-block，但其中一些包含文本，另一些则为空。
CSS 样式：
.x {
display: inline-block;
width: 80px;
height: 120px;
border: 1px solid red;
/* 默认 vertical-align: baseline; */
}HTML 结构：
<div class="x"></div> <div class="x"></div> <div class="x">aasd asd asd asd asd asd asd asd asd asd </div> <div class="x">b</div> <div class="x"></div>
观察结果： 在上述代码中，由于 vertical-align 默认为 baseline，您会发现：
- 前两个空的 div.x 元素会相对较低地显示，它们的“假想基线”在底部。
- 第三个包含长文本的 div.x 元素，其基线是其内部文本的最后一行。
- 第四个包含短文本“b”的 div.x 元素，其基线是字符“b”的基线。
- 最后一个空的 div.x 元素同样较低显示。
由于这些元素的基线位置各不相同，它们在同一行内无法整齐地排列，而是呈现出高低不一的垂直错位效果。
解决方案：使用 vertical-align 属性
要解决 inline-block 元素的垂直错位问题，最直接且推荐的方法是显式地设置 vertical-align 属性。将 vertical-align 设置为 top、middle 或 bottom 可以强制所有元素按照统一的标准进行垂直对齐，从而避免 baseline 带来的不一致性。
通常，我们希望 inline-block 元素能够顶部对齐，因此 vertical-align: top; 是最常用的解决方案。
修改后的 CSS 样式：
.x {
display: inline-block;
width: 80px;
height: 120px;
border: 1px solid red;
vertical-align: top; /* 关键改动 */
}HTML 结构（保持不变）：
<div class="x"></div> <div class="x"></div> <div class="x">aasd asd asd asd asd asd asd asd asd asd </div> <div class="x">b</div> <div class="x"></div>
应用解决方案后的效果： 通过添加 vertical-align: top;，所有 div.x 元素的顶部都将与其所在行框的顶部对齐。无论它们是否包含文本内容，或文本内容的长短，它们都将整齐地排列在同一水平线上，消除了之前观察到的垂直错位现象。
注意事项
- 适用范围： vertical-align 属性仅对行内元素（inline）、行内块级元素（inline-block）以及表格单元格（table-cell）有效。它对块级元素（block）或 Flexbox/Grid 容器中的直接子元素不起作用。
- 基于行框： vertical-align 的对齐是基于其所在的行框（line box）进行的，而不是直接基于其父容器。这意味着如果行框的高度因为某个元素（例如一个非常高的图片）而改变，其他 inline-block 元素的对齐位置也会相应调整。
- Flexbox/Grid 替代方案： 在使用现代 CSS 布局（如 Flexbox 或 Grid）时，通常会使用 align-items、align-content 或 align-self 等属性来控制子元素的垂直对齐，此时 vertical-align 将不再适用。
- 一致性： 为了保持布局的一致性和可预测性，建议在所有使用 display: inline-block 的元素上显式设置 vertical-align 属性，而不是依赖其默认行为。
总结
display: inline-block 元素因其默认的 vertical-align: baseline 行为，在包含不同类型内容的元素并排显示时，常常会导致垂直方向上的错位。深入理解 baseline 的定义在有无文本内容时的差异，是解决问题的关键。通过简单地将 vertical-align 属性设置为 top（或 middle、bottom），我们可以有效地强制所有 inline-block 元素按照统一的标准进行垂直对齐，从而实现整齐、可预测的布局。在现代 Web 开发中，掌握这些基础 CSS 属性的精髓，对于构建健壮的用户界面至关重要。
