当使用 inline-block 布局多个 div 时，因 HTML 中的换行符和空格被渲染为文本节点，导致元素间产生不可见间隙，进而使第三列被迫折行——这是常见布局失效主因，可通过移除空白、重置字体大小或改用 Flexbox 彻底解决。
当使用 `inline-block` 布局多个 div 时，因 html 中的换行符和空格被渲染为文本节点，导致元素间产生不可见间隙，进而使第三列被迫折行——这是常见布局失效主因，可通过移除空白、重置字体大小或改用 flexbox 彻底解决。
在构建 3×3 网格（如九宫格卡片、图标矩阵）时，许多开发者会尝试用 display: inline-block 实现“三列并排 + 每列三行”的嵌套结构，但常遇到前两列正常显示、第三列意外掉到下一行的问题。这并非 CSS 计算错误，而是 inline-block 的固有行为所致。
根本原因：HTML 空白字符被解析为间距
浏览器会将 <div class="two"> 之间的换行与缩进视作一个空格字符（相当于 ），而 inline-block 元素会像文字一样尊重该空格。即使每个 .two 宽度设为 33.333%，加上约 4px 的默认空白间隙后，总宽度轻松超过 100%，触发自动换行。
✅ 正确解决方案（推荐 Flexbox）
Flexbox 是现代、语义清晰且无空白干扰的首选方案：
#one {
display: flex;
width: 30vw;
height: 30vh;
gap: 2px; /* 可选：统一控制列/行间距 */
}
.two {
flex: 1; /* 等宽占满 #one */
display: flex;
flex-direction: column;
gap: 2px;
}
.three {
flex: 1;
background: #e0f7fa;
border: 1px solid #00acc1;
}<div id="one">
<div class="two">
<div class="three"></div>
<div class="three"></div>
<div class="three"></div>
</div>
<div class="two">
<div class="three"></div>
<div class="three"></div>
<div class="three"></div>
</div>
<div class="two">
<div class="three"></div>
<div class="three"></div>
<div class="three"></div>
</div>
</div>⚠️ 若坚持使用 inline-block（兼容旧项目）
需同时满足三项条件：
- 消除 HTML 空白：将 .two 标签写在同一行，或注释掉换行；
- 修正宽度计算：减去间隙（如 width: calc(33.333% - 4px)）；
- 父容器禁用字体大小：#one { font-size: 0; }，子元素再重设 font-size（若含文字）；
#one {
font-size: 0; /* 关键：消除 inline-block 间隙根源 */
}
.two {
display: inline-block;
width: calc(33.333% - 2px); /* 预留左右 margin 总和 */
font-size: 16px; /* 子元素恢复字体 */
}? 重要注意事项
- ID 必须唯一：原代码中重复使用 id="two" 和 id="three" 违反 HTML 规范，应全部改为 class；
- 盒模型影响：边框（border）、内边距（padding）会增加实际宽度，建议启用 box-sizing: border-box；
- 响应式安全：vh/vw 单位在小屏设备上可能导致溢出，建议搭配 max-width 或媒体查询兜底。
综上，Flexbox 不仅彻底规避空白问题，还提供对齐、分布、换行等强大控制力，是实现网格布局的现代标准方案。
