当使用 display: inline-block 布局多个相邻元素时，HTML 中的换行符和空格会被浏览器解析为一个空白字符（等效于空格），从而在视觉上产生不可见却实际存在的间隙；该问题可通过父容器设置 font-size: 0 并在子元素中重置字体大小来彻底消除。
当使用 `display: inline-block` 布局多个相邻元素时，html 中的换行符和空格会被浏览器解析为一个空白字符（等效于空格），从而在视觉上产生不可见却实际存在的间隙；该问题可通过父容器设置 `font-size: 0` 并在子元素中重置字体大小来彻底消除。
在 CSS 布局实践中，inline-block 是一种兼顾行内流式特性与块级盒模型控制能力的常用方案。然而，开发者常遇到一个看似“神秘”的现象：明明设置了精确宽度（如 width: 30%）、无边距无填充，元素却无法紧密并排，右侧总出现一条细小的空白缝隙——这正是本文要解决的核心问题。
根本原因：HTML 文本节点的渲染行为
inline-block 元素本质上属于「行内格式化上下文（IFC）」中的参与元素，因此会像文字一样响应空白符（包括换行、制表符、空格）。以下结构：
<div> <aside></aside><main></main><aside></aside> </div>
其中
推荐解决方案：font-size: 0 + 子元素重置
最简洁、兼容性好（支持 IE8+）的方法是在包含 inline-block 子项的父容器上设置 font-size: 0，从而让空白字符失去渲染宽度；随后在每个子元素中显式声明所需字体大小（若需文本内容）或保持 font-size: initial（纯色区块可省略）：
/* 父容器：消除空白间隙 */
div {
height: 700px;
margin: 0 auto;
font-size: 0; /* 关键：让空白字符无宽度 */
}
/* 子元素：恢复正常字体（如有文本）并设置 inline-block */
aside,
main {
display: inline-block;
height: 700px;
}
aside {
width: 29.71%;
background-color: aqua;
font-size: 16px; /* 若内部有文字，需重置 */
}
main {
width: 40%;
background-color: pink;
font-size: 16px;
}
⚠️ 注意事项：
- 宽度总和应 ≤ 100%，建议留出微小余量（如 29.71% + 40% + 29.71% = 99.42%），避免因四舍五入导致换行；
- 若子元素内含文本，务必在子元素中重置 font-size，否则文字将不可见；
- 替代方案（如 HTML 中删除所有换行、使用注释包裹空白、float 布局或现代 flexbox/grid）虽可行，但 font-size: 0 在保持语义结构和代码可读性方面更具优势。
总结来说，这个“奇怪间隙”并非 CSS Bug，而是 HTML 与 CSS 渲染规范协同作用的必然结果。理解其原理后，你不仅能快速修复问题，更能建立起对布局底层机制的扎实认知——这是迈向专业前端开发的关键一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
