在网页排版中，div 默认是块级元素，会在页面上各自占满一行。如果希望多个 div 在同一行内从左到右排列，同时又保留设置宽高、内外边距的能力，使用 CSS 的 display:inline-block 是非常直接的做法。它兼具行内元素排列特点和块级盒子模型特征，比浮动更可控，也比弹性布局更轻量。
一、inline-block 的基本用法
要将多个 div 内联排列，只需在 CSS 中为这些 div 设置 display:inline-block。这样它们就会像文字或图片一样，在父容器内沿基线排成一行，直到宽度超出容器才换行。与 display:inline 不同，inline-block 元素可以正常设置 width、height、margin 和 padding，因此非常适合做卡片、导航项或栅格单元。
下面是一段最简示例，三个 div 被设置为 inline-block 并排显示：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: inline-block;
width: 120px;
height: 80px;
background: #cde;
margin: 4px;
}
</style>
</head>
<body>
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</body>
</html>
上述代码在多数现代浏览器中能正确并排展示三个盒子。不过实际开发中常遇到元素间出现莫名空隙，这并非 bug，而是由 HTML 源码中的空白符被当作文本节点处理导致的。
二、消除 inline-block 元素间的空白间隙
当多个 inline-block 的 div 在 HTML 里换行书写时，标签之间的空格、回车会被浏览器合并为一个空白字符，从而在 div 之间渲染出大约 4px 到 8px 的间隙。如果布局要求严丝合缝，就必须消除它。常见方案有三类：改写 HTML 去掉换行、使用负 margin、以及利用 font-size:0 技巧。
最易维护的做法是在父容器上设置 font-size:0，再在子 div 上恢复具体字号。这样父级不生成文字空隙，子元素仍可正常显示文本：
.parent {
font-size: 0;
}
.parent > .box {
display: inline-block;
font-size: 14px;
width: 100px;
height: 60px;
background: #eaf;
}
另一种方式是直接删除 div 标签间的换行，写成 <div class="box">A</div><div class="box">B</div>，但会降低源码可读性。负 margin 如 margin-left:-4px 也能凑效，却依赖字体环境，不够稳健。综合来看，font-size:0 方案兼容性好且逻辑清晰。
三、控制垂直对齐方式
inline-block 元素默认依据基线（baseline）对齐，当 div 高度不一致时，底部或顶部会出现错位。通过 vertical-align 属性可调整，例如设 vertical-align:top 让所有 div 顶部对齐，设 middle 则居中对齐。该属性仅对行内块或表格单元格生效，是 inline-block 布局的关键补充。
以下示例展示顶部对齐的常见写法：
.box {
display: inline-block;
vertical-align: top;
width: 100px;
height: 60px;
background: #fea;
}
.tall {
height: 100px;
}
如果不显式设置 vertical-align，较高的 div 会让整行基线下沉，导致视觉上其他 div 被向下推。因此在做导航菜单或卡片列表时，通常统一配置 vertical-align 以避免奇怪的错位。
四、与 float 和 flex 的对比
使用 float:left 也能让 div 横排，但浮动元素脱离普通流，父容器易塌陷，需要清除浮动。inline-block 留在文档流内，父级高度自动撑开，结构更直观。不过 inline-block 受空白符和垂直对齐影响，而 flex 布局通过 container 的 display:flex 彻底解决了间隙与对齐，且支持换行、排序等高级能力。
从兼容角度，inline-block 在 IE8 及以上均支持，flex 在旧版 IE 无效。如果项目需兼顾极老环境，inline-block 是安全选择；若面向现代浏览器，flex 开发效率更高。下表简要比较三者：
| 方式 | 是否脱离文档流 | 间隙问题 | 对齐控制 | 旧浏览器支持 |
|---|---|---|---|---|
| float | 是 | 无 | 较弱 | 极好 |
| inline-block | 否 | 有，需处理 | 靠 vertical-align | IE8+ |
| flex | 否 | 无 | 非常灵活 | 现代浏览器 |
可见 inline-block 在简单横排场景中足够使用，且理解其机制有助于排查很多“奇怪空隙”问题。
五、完整应用示例
下面是一个响应式的三列卡片布局，利用 inline-block 实现，并修复了间隙与对齐：
<!DOCTYPE html>
<html>
<head>
<style>
.list {
font-size: 0;
text-align: center;
}
.card {
display: inline-block;
vertical-align: top;
font-size: 14px;
width: 30%;
margin: 1%;
padding: 10px;
box-sizing: border-box;
background: #dfe;
border: 1px solid #9c9;
}
</style>
</head>
<body>
<div class="list">
<div class="card">卡片一内容</div>
<div class="card">卡片二内容较长一些示例文字</div>
<div class="card">卡片三</div>
</div>
</body>
</html>
该示例中，父级 font-size:0 消除间隙，子卡片用百分比宽度实现简易自适应，vertical-align:top 保证不同高度卡片顶部齐平。通过这种方式，无需 JavaScript 或现代布局模块，就能交付稳定的内联排列效果。
inline-blockdiv布局CSS排版修改时间：2026-08-03 08:51:30