设置display:inline-block的span标签垂直错位无法同行对齐如何解决

问题原因 #

默认情况下，display: inline-block 元素的垂直对齐属性vertical-align取值为baseline：

• 无内容的空inline-block元素，基线就是自身的底部边缘
• 有文本内容的inline-block元素，基线是内部文本的基线
  两种基线位置不一致，就会出现错位的情况。另外你设置的height: 5%属于相对高度，需要父元素（这里是body、html）有明确的高度声明才会生效，否则高度会由内容撑开，进一步加剧高度表现不一致的问题。

解决方案 #

方案1：统一inline-block元素的垂直对齐规则 #

给.a类添加vertical-align属性，取值可以选top/middle/bottom，按需选择即可，示例修改后的CSS：

.a {
    width: 17%;
    height: 20px; /* 这里可以替换为你需要的高度，若要使用百分比高度需要先给html、body设置height: 100% */
    display: inline-block;
    vertical-align: middle; /* 新增这行 */
}

方案2：使用Flex布局实现对齐 #

给父元素（这里是body，也可以给span套一层父容器）设置Flex布局，无需额外修改span的样式即可自动对齐，示例：

body {
    display: flex;
    gap: 0; /* 可自行调整元素间距 */
}
.a {
    width: 17%;
    height: 20px;
    /* 不需要再设置display: inline-block */
}

方案3：给空span添加占位内容 #

如果不想修改CSS，也可以给空的span标签内部添加 空格占位，让空元素也有文本基线，实现对齐：

<span class="a">&nbsp;</span>
<span class="a">2</span>
<span class="a">2</span>
<span class="a">2</span>
<span class="a">2</span>

内容的提问来源于stack exchange，提问作者made bird