HTML解析器将标签间换行/空格压缩为一个空格，当元素为inline或inline-block时，该空格被渲染为可见间隙；消除方法包括父容器font-size:0、删除HTML空白或使用注释“吃掉”空白。
为什么
之间有看不见的空隙
HTML 解析器会把标签之间的换行符、制表符和多个空格，统一压缩成一个空白字符。当这些标签是 inline 或 inline-block 类型时（比如未显式设 display 的 <img alt="HTML块级元素空格间隙的调整技巧" >、<span></span>、<picture></picture>），这个“一个空格”就会被渲染为可见的水平间隙。
常见现象：多张图片并排时出现 4px 左右的白缝；<li> 用 inline-block 布局时文字错位；富文本中 <p></p> 和 <div> 混排后段落顶部/底部多出空行。<ul>
<li>不是 CSS margin 或 padding 导致的，检查 computed 样式里 <code>margin 和 padding 都是 0 也可能有缝
inline 元素之间有换行或空格，就可能触发<p></p> 默认是块级元素，它和相邻 <p></p> 之间的换行不会产生间隙；但若你把它改成 display: inline-block，那就立刻中招消除间隙的三种可靠写法
没有“万能解”，要根据场景选：
- 父容器设
font-size: 0，子元素重置字体大小：.gallery { font-size: 0; } .gallery img { font-size: 16px; }—— 简单粗暴，但需注意子元素内文本要显式恢复字号 - 移除 HTML 中的换行与空格：把
<img alt="HTML块级元素空格间隙的调整技巧" ><img alt="HTML块级元素空格间隙的调整技巧" ><img alt="HTML块级元素空格间隙的调整技巧" >写成一行，或用 HTML 注释“吃掉”空白：<img alt="HTML块级元素空格间隙的调整技巧" ><!-- --><img alt="HTML块级元素空格间隙的调整技巧" ><!-- --><img alt="HTML块级元素空格间隙的调整技巧" > - 用
float: left让子元素脱离文档流（需清浮动）：.gallery img { float: left; }+ 父容器加::after清除，适合老项目兼容 IE9+
不推荐用 margin-left: -4px 这类魔法数字硬调：不同字体、不同浏览器下空白宽度浮动，且响应式缩放后容易失效。
立即学习“前端免费学习笔记（深入）”；
为什么 display: flex 能根治这个问题
flex 容器完全绕过了 HTML 空白字符的渲染逻辑。子项无论是否换行、是否有空格，都不会产生间隙。
- 只需给父容器加
display: flex，默认flex-direction: row就够了 - 若需换行，加
flex-wrap: wrap；若想等宽分布，用justify-content: space-between - 注意：子项若本身是
inline-block，flex 下它会自动变成 flex item，vertical-align失效，但间隙没了 - 唯一代价：IE10+ 支持，如需支持 IE9 及以下，得退回前两种方案
富文本区域里怎么安全缩进段落又不拉出间隙
很多人想给 <p></p> 加 text-indent 实现首行缩进，结果发现段落之间多了空行——其实是误用了 margin-top 或没重置 margin-bottom。
-
<p></p>默认有margin-top和margin-bottom（通常 1em），连续段落会形成“双倍间距” - 正确做法：
.rich-text p { text-indent: 2em; margin-top: 0; margin-bottom: 1em; } - 如果区域里混有
<pre class="brush:php;toolbar:false;"></pre>、<code>或<blockquote></blockquote>，它们不该缩进，必须单独排除：.rich-text pre, .rich-text code { text-indent: 0; } - 别用通配符
.rich-text * { text-indent: 2em }，否则<h3></h3>和列表项也会被缩进，视觉混乱
最易被忽略的是：缩进单位用 em，但段落内嵌了 font-size 更小的 <small></small> 或 span，text-indent 仍按父级字号计算，不会随子元素变小——这反而是优点，保证首行对齐稳定。
