display: inline-block 是最常用且兼容性好的多元素同行显示方案，兼具块级元素的盒模型控制与行内元素的并排特性，但需处理空白间隙和 vertical-align 对齐问题。
让多个元素在一行显示，用 display: inline-block 是最常用且兼容性好的方式之一。它既保留了块级元素可设置宽高、内边距、外边距的特性，又具备行内元素“并排排列”的行为。
为什么选 inline-block 而不是 inline？
inline 元素（如 span、a）默认同行显示，但无法直接设置宽度、高度、上下 margin 和 padding（部分 padding 会显示但不影响布局）。而 inline-block 兼具两者优点：能设尺寸和盒模型属性，又能自然换行对齐。
基础写法与关键细节
给需要横排的元素统一设置：
display: inline-block;
立即学习“前端免费学习笔记（深入）”；
但要注意几个容易出问题的点：
- 默认有空白符间隙：HTML 中元素间的换行或空格会被渲染为约 4px 的空白间隙。解决方法有三种：
- 父容器设
font-size: 0，子元素再单独设字体大小 - 移除 HTML 中元素标签间的换行和空格（不推荐，影响可读性）
- 用负 margin（如
margin-left: -4px），但需适配不同字体环境
- 父容器设
-
垂直对齐方式默认是 baseline，可能导致高低不齐。建议显式设置：
vertical-align: top;或middle等值 - 若父容器宽度不够，元素会自动折行——这是正常行为，类似文字换行
一个实用示例
比如实现三列导航按钮：
HTML：
<nav class="nav"><br> <button class="nav-item">首页</button><br> <button class="nav-item">关于</button><br> <button class="nav-item">联系</button><br> </nav>
CSS：
.nav { font-size: 0; }<br>
.nav-item {<br>
display: inline-block;<br>
vertical-align: top;<br>
font-size: 14px;<br>
padding: 8px 16px;<br>
margin-right: 10px;<br>
}
这样三个按钮就能严格贴顶、无间隙、等高并排显示。
替代方案提醒
虽然 inline-block 很实用，但现代布局中更推荐：
-
Flexbox（
display: flex）：控制更精准，无空白间隙问题，支持对齐、换行、伸缩 -
Grid（
display: grid）：适合二维布局，结构清晰
