本文详解 inline-block 布局中由 html 空白符（换行、缩进、空格）引发的意外间隙现象，揭示其本质成因，并提供两种可靠解决方案：纯 css 修复与现代 flexbox 替代方案。
本文详解 inline-block 布局中由 html 空白符（换行、缩进、空格）引发的意外间隙现象，揭示其本质成因，并提供两种可靠解决方案：纯 css 修复与现代 flexbox 替代方案。
在 CSS 布局实践中，一个看似“像素完美”的设计常因细微细节而失效——比如两个宽度均为 300px 的元素无法并排填满 600px 的容器，甚至在换行后出现不可解释的垂直间距。这并非浏览器 Bug，而是 display: inline-block 的固有行为所致：HTML 中的换行符、制表符和空格会被浏览器解析为一个空白字符（U+0020），并渲染为约 4px 宽的文本级间隙（具体宽度取决于字体和行高）。该间隙被计入行内布局流，导致总宽度超出预期。
以下是最小复现示例（原始代码问题所在）：
<main> <div id="left"></div> <div id="right"></div> </main>
尽管
✅ 解决方案一：消除 HTML 空白（兼容性优先）
最直接的方式是移除
<main> <div id="left"></div><div id="right"></div> </main>
或使用注释“吞噬”空白：
<main> <div id="left"></div><!-- --><div id="right"></div> </main>
同时建议显式设置 vertical-align: top 避免基线对齐干扰：
#left, #right {
display: inline-block;
height: 300px;
width: 300px;
vertical-align: top; /* 关键：统一垂直对齐方式 */
}✅ 优势：零 JavaScript、全浏览器兼容（IE8+）
⚠️ 注意：可读性下降，维护成本略高；若使用模板引擎（如 Handlebars、Vue），需注意预编译时是否引入新空白。
✅ 解决方案二：拥抱 Flexbox（推荐首选）
现代布局应优先采用语义清晰、行为可控的 Flexbox：
main {
display: flex; /* 启用弹性容器 */
/* 移除 inline-block 相关声明 */
background: #000;
height: 600px;
margin: 25px;
width: 600px;
}
#left, #right {
height: 300px;
width: 300px;
/* 不再需要 display: inline-block 或 vertical-align */
}
/* 可选：确保严格等宽且无间隙 */
#left, #right {
flex: 0 0 300px; /* 不伸缩、不压缩、基础宽度 300px */
}HTML 保持自然缩进，完全无需修改：
<main> <div id="left"></div> <div id="right"></div> </main>
✅ 优势：语义明确、无空白干扰、天然支持对齐/分布控制（如 justify-content, align-items）、响应式友好
✅ 兼容性：Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+（Can I use flexbox 显示全球支持率超 99%）
? 总结与建议
- inline-block 的空白间隙是规范行为，非缺陷，但易被忽视；
- 单纯依赖 font-size: 0 或 letter-spacing: -4px 等 hack 方案存在副作用（影响子元素字体、截断文字等），不推荐；
- 对于双栏、网格、导航等常见布局场景，Flexbox 是更健壮、可维护的选择；
- 若需兼容极老旧环境（如 IE9 及以下），可结合 inline-block + vertical-align: top + HTML 紧凑写法，并通过构建工具（如 HTMLMinifier）自动化处理空白。
布局的“像素级精准”，源于对渲染原理的理解，而非盲目调试。从今天起，让 Flexbox 成为你布局工具箱中的默认选项。
