图片默认有空白间隙是因为其为inline元素并按基线对齐，受line-height影响产生约4px间隙；解决方法包括设display:block、vertical-align、父容器font-size:0、flex布局或删除HTML空白符。

图片默认有空白间隙是因为行内元素特性

HTML 中 <img> 默认是 inline 元素，会像文字一样对齐基线（baseline），下方自动留出约 4px 空隙——这不是 margin 或 padding，而是字体行高（line-height）导致的“看不见的底座”。哪怕你把 margin 和 padding 都设为 0，间隙还在。

• 常见错误现象：<img src="a.jpg"><img src="b.jpg"> 在页面上总有一条细缝，inspect 元素发现父容器里图片底部有空白
• 最直接的解法是改 display：把 <img> 设为 display: block 或 display: inline-block 并配 vertical-align: top/middle/bottom
• 如果图片必须保持 inline 行为（比如混排文字），用 vertical-align: bottom 通常比 top 更稳，因为 baseline 对齐在不同字体下表现不一致

父容器 font-size 为 0 是个有效但要小心的技巧

由于 inline 元素间的空白来自 HTML 换行/空格被渲染成字符，而字符大小取决于父容器的 font-size，所以把父容器 font-size: 0 能“消灭”这个间隙。但副作用明显：子元素若继承该设置，文字就看不到了。

• 适用场景：纯图片横向排列，且父容器不包含其他需显示文字的内容
• 正确写法是先设父容器 font-size: 0，再给图片单独设回正常字号（如果图片含文字或伪元素）；更稳妥的是只给图片设 font-size: 0，但图片本身不用字号，所以实际只需重置父容器 + 子元素不继承即可
• 兼容性没问题，但容易漏掉恢复子文字的 font-size，尤其用 CSS-in-JS 或组件嵌套时

flex 布局是最现代也最省心的方案

用 display: flex 把图片父容器变成弹性盒子，间隙问题天然消失——因为 flex item 默认不参与 inline 布局，也不受 white-space 影响。

• 只需三行 CSS：display: flex、gap: 0（显式声明无间隙）、flex-wrap: nowrap（防换行）
• 注意旧版 Safari 对 gap 支持弱，可加 margin-right: -4px 兜底，但仅当最后一个图片不需要右间距时才安全
• 如果图片需要响应式等比缩放，flex 本身不控制尺寸，得额外加 max-width: 100% 和 height: auto 到 <img>

别忽略 HTML 源码里的换行符本身

即使 CSS 全部写对，如果写成：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

<div class="gallery">
  @@##@@
  @@##@@
</div>

这两行之间的换行和缩进，在 inline 模式下就是真实存在的空白字符。浏览器会把它当一个空格渲染，宽度≈半个中文字符。

• 解决方法之一是删掉源码中 img 标签之间的所有空白（包括换行），写成一行：<img src="a.jpg"><img src="b.jpg"> —— 可读性差，但有效
• 更实用的是用注释“吃掉”空白：<img><!-- --><img>，或者用构建工具（如 PostHTML）自动压缩 HTML
• 这点常被忽略，尤其在模板字符串或 JSX 中拼接图片时，{list.map(...)} 如果没做 .join('')，也可能带入逗号或换行

图片之间有没有距离，本质不是“怎么去掉 margin”，而是“怎么绕过 inline 元素的渲染规则”。越早意识到这点，越不容易在 margin: 0 上反复试错。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！