深入理解 display:inline-block 的垂直对齐行为与解决方案

display:inline-block 的默认垂直对齐机制

display:inline-block 是 css 中一个非常实用的布局属性，它允许元素既可以像行内元素一样与文本流并排，又可以像块级元素一样设置宽度、高度、内外边距等。然而，在使用 inline-block 进行布局时，开发者常常会遇到一个看似“奇怪”的垂直对齐问题，即元素在有内容和无内容时，其垂直位置表现不同。

这种现象的根本原因在于 inline-block 元素的默认 vertical-align 属性值为 baseline（基线）。baseline 的定义会根据元素内部是否包含文本内容而有所不同：

1. 当 inline-block 元素包含文本内容时：其基线通常是该元素内最后一行文本的基线。
2. 当 inline-block 元素不包含任何文本内容时：其基线被定义为元素的底部边界。

正是由于这种基线定义的差异，导致了视觉上的对齐不一致。当多个 inline-block 元素并排显示时，浏览器会尝试将它们的基线对齐，从而造成了无内容元素看起来比有内容元素“下沉”的现象。

为了更好地理解这一行为，请看下面的示例代码：

CSS 样式：

.x {
  display: inline-block;
  width: 80px;
  height: 120px;
  border: 1px solid red;
}

欧迪网络科技-sea资源网

分享到：