把几张切片图挨着摆，拼成一张完整横幅，结果每张之间都有约四像素的白缝。缝隙不是图片问题，是 HTML 的空白符在作祟。
间隙从哪来
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，构建产物由模板引擎输出时才考虑去空白。