### [HTML 多张图片无缝拼接：先消灭空白符间隙](https://www.huociguo.com/article/1760)

**Published:** 2026-10-02T09:45:26

**Author:** 米了

**Excerpt:** 把几张切片图挨着摆，拼成一张完整横幅，结果每张之间都有约四像素的白缝。缝隙不是图片问题，是 HTML 的空白符…

把几张切片图挨着摆，拼成一张完整横幅，结果每张之间都有约四像素的白缝。缝隙不是图片问题，是 HTML 的空白符在作祟。

![像素风格的拼接画面](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-28408521.jpeg)

拼接的敌人是看不见的空隙。图片来自 Pexels。

## 间隙从哪来

img 是行内级元素，标签之间的换行与空格会被渲染成一个文本空档，宽度由字号决定。四张图就是三道缝。

## 方案一：font-size 归零

.strip { font-size: 0; }
.strip img { display: inline-block; }

父级字号设为零，空白符不再占位。改动最小，适合简单拼接。

## 方案二：flex 排列

.strip { display: flex; }
.strip img { display: block; width: 25%; }

flex 项目之间不渲染空白符，间隙天然消失。图片统一为块级并平分宽度，边缘对齐更稳。

## 方案三：消灭源码空白

把相邻 img 标签写在一行，中间不留任何字符，也能消除缝隙。可读性差，多人协作时容易被格式化工具打回原形，只作临时手段。

## 导出侧的两个补充

切图导出 PNG 时关闭抗锯齿，相邻切片的边缘像素才能严丝合缝。像素风素材追加 image-rendering: pixelated，防止浏览器缩放时做平滑处理。

三方案按场景选：简单排列用 font-size，响应式布局用 flex，构建产物由模板引擎输出时才考虑去空白。

**Tags:** image-rendering, 图片拼接, 抗锯齿, 盒模型, 行内间隙

**Categories:** HTML5

---