HTML结构中的空格与换行符对Inline-Block布局的影响及消除-html教程-PHP中文网

inline-block间隙非css bug，而是html解析将标签间换行/空格视作u+0020字符参与行内布局；font-size:0可消除但需重置子元素字号；flexbox是现代首选方案，gap和align-items更直观可控。

html结构中的空格与换行符对inline-block布局的影响及消除

inline-block间隙不是CSS bug，是HTML解析行为

浏览器把两个<div>标签之间的换行或空格，当成一个普通空格字符（U+0020）来渲染，而这个空格会参与行内布局流——它有字体大小、有行高、有宽度。哪怕你没写任何文字，只要父容器<code>font-size是16px，这个空格就大概占4–8px（取决于字体度量）。它不属于任一子元素的margin或padding，inspect时也看不到盒模型里有它，只在父容器的“行框”里悄悄占位。

font-size: 0 是最常用但必须配重置的方案

给父容器设font-size: 0，能让空白文本节点视觉上“缩没”，但副作用明显：

所有子元素文字会消失，必须对每个含文本的子元素显式设置font-size（比如font-size: 14px）
<input>、<button></button>等替换元素不继承font-size，需单独加样式或改用vertical-align: top对齐
Chrome 默认有最小字号限制（12px），若需兼容老版，得加-webkit-text-size-adjust: none
父容器本身要显示说明文字（如带标题的导航栏）时，此法直接失效

Flexbox 替代 inline-block 是现代项目的首选

不用动HTML结构、不操心空白、不处理基线对齐错位，一行display: flex就能解决根本问题：

子元素默认不换行，flex-wrap: nowrap可确保严格并排
间隙控制更直观：gap属性直接定义间距，无需hack
垂直对齐不再依赖vertical-align，用align-items统一控制
IE10+支持良好；若需支持IE9及以下，才需退回inline-block + font-size: 0

HTML注释法适合静态页，但构建流程中难维持

在相邻<div class="item"></div>之间插入，能“吃掉”换行符，又保留源码可读性：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

<div class="container">
  <div class="item"></div>
<!--
--><div class="item"></div>
<!--
--><div class="item"></div>
</div>

但它的问题很实际：

手写页面可行，模板引擎（如Vue SFC、JSX）或循环生成的列表里根本没法插注释
Prettier、ESLint等格式化工具默认会删掉这类注释，协作中极易被“修复”回原样
构建时若未启用html-webpack-plugin的collapseWhitespace: true，上线后仍会暴露

真正容易被忽略的是：间隙常和vertical-align: baseline叠加——哪怕消除了空白，右侧元素仍可能因基线对齐而“下沉”。所以检查间隙时，顺手加个vertical-align: top或换用flex，比死磕空白字符更省时间。