inline-block 元素因 HTML 中的换行符与空格被渲染为文本节点，导致意外间隙；通过父容器设置 font-size: 0 并重置子元素字体，可彻底消除该间隙。
inline-block 元素因 html 中的换行符与空格被渲染为文本节点，导致意外间隙；通过父容器设置 `font-size: 0` 并重置子元素字体，可彻底消除该间隙。
在使用 display: inline-block 布局多个相邻块级元素（如 <aside>、<main>）时，开发者常遇到一个看似“神秘”的问题：元素之间自动出现几像素的空白间隙（通常约 4px），即使已显式清除 margin、padding 和 border。这并非 CSS 错误，而是 HTML 解析机制的自然行为——HTML 中元素间的换行、缩进和空格会被浏览器当作文本节点处理，并按当前 font-size 渲染为可测量的空白字符。
例如，在你的原始代码中：
<div> <aside></aside> <main></main> <aside></aside> </div>
<aside> 与 <main> 标签之间的换行与缩进，实际等效于插入了一个空格字符。由于父 <div> 默认 font-size: 16px，该空格便占据约 4px 的水平宽度（受字体度量影响），从而在视觉上形成“奇怪的间隙”。
✅ 推荐解决方案：font-size: 0 + 子元素重置字体
立即学习“前端免费学习笔记（深入）”；
在包裹 inline-block 子元素的父容器（即 <div>）上设置 font-size: 0，可使空白字符失去渲染尺寸；再为每个子元素单独声明所需字体大小（若含文本内容）：
div {
height: 700px;
margin: 0 auto;
font-size: 0; /* 关键：消除空白间隙 */
}
aside, main {
display: inline-block;
height: 700px;
font-size: 16px; /* 恢复子元素正常字体（如有文本） */
}
aside {
width: 29.71%;
background-color: aqua;
}
main {
width: 40%;
background-color: pink;
}⚠️ 注意事项：
- font-size: 0 仅作用于父容器，不影响子元素内实际文本的可读性（只要子元素自身设置了 font-size）；
- 宽度总和需 ≤ 100%（建议预留 ≤ 0.5% 余量以兼容不同浏览器对小数精度的处理）；
- 替代方案（如移除 HTML 空格、使用注释连接、负 margin 或 flexbox）虽可行，但 font-size: 0 兼容性好（IE8+）、语义清晰、维护成本低，是行业常用实践。
? 延伸建议：
现代布局更推荐使用 display: flex 或 display: grid 替代 inline-block 实现多栏布局，从根本上规避空白问题。例如：
.WrapMiddle {
display: flex;
}
.Left, .Middle, .Right {
flex: 0 0 20.83%; /* 或使用具体 width */
}
.Middle { flex-basis: 68.75%; }但理解 inline-block 的空白成因与修复逻辑，对调试遗留项目及深入掌握 CSS 渲染机制仍具重要价值。
