根本原因是浏览器将换行符和空格当字符渲染，img默认inline导致底部留白约4px；表格border-spacing因border-collapse:collapse失效；canvas坐标未取整引发抗锯齿漏光。
为什么大屏拼接总出现1px缝隙
不是图片导出问题，也不是分辨率没对齐——根本原因是浏览器把换行符和空格当字符渲染，img默认display: inline，底部会留出约4px空白；表格用cellspacing却碰上border-collapse: collapse，直接失效；Canvas绘图时坐标没取整，三角形顶点落在0.5像素上，抗锯齿一插值就漏光。
消除![]()
拼接缝隙的三种实操方案
选哪种取决于你是否能改HTML结构、是否要保留文字、是否兼容老系统：
-
display: block最简单：给所有拼图img加style="display: block;"，立刻干掉底部间隙，但会破坏行内布局，需额外包裹容器 -
font-size: 0父容器法最稳：父元素设font-size: 0，子img再显式设font-size: 14px（其实img不依赖字号，但为防万一），同时解决换行符间隙和基线错位 -
vertical-align: top最快捷：只加style="vertical-align: top;"到img，不改布局、不碰父级，但仅消底部缝，左右缝还得配合margin-right: -4px或Flex
表格拼接大屏时border-spacing失效怎么办
cellspacing在现代项目里基本等于摆设，因为Bootstrap/Tailwind等默认写table { border-collapse: collapse; }，一设就废。真正可控的是CSS的border-spacing，但必须满足两个前提：
- 显式声明
border-collapse: separate（不能靠默认值，有些重置样式会覆盖） -
border-spacing单位只能是px、em、rem，不能用%；顺序固定为border-spacing: 6px 12px（水平间距 在前，垂直 在后） - 如果用了
display: grid包裹table，border-spacing会失效——得退回到纯table流式布局
Canvas拼接图形时像素级缝隙怎么堵
Canvas里画相邻矩形或三角形，哪怕坐标完全对齐，GPU插值或DPR缩放也会让边缘发虚、露底色。关键不是“画得准”，而是“告诉浏览器别插值”：
- 设
ctx.imageSmoothingEnabled = false（对drawImage有效） - 坐标强制取整：
ctx.fillRect(Math.round(x), Math.round(y), w, h)，避免100.5这种半像素值 - 高DPR屏（如Mac Retina）下，
canvas.width/canvas.height要设为物理像素，再用CSS缩放回逻辑尺寸，否则1px线会被模糊成2px带灰边 - 不要用
lineWidth = 1画分隔线——改用fillRect画1px宽色块，更可控
真正难的不是写几行代码，而是每张图导出时是否带半透明边缘、CMS是否自动加了padding、Canvas是否被父容器transform: scale()二次缩放——这些细节一错，缝隙就从代码里钻出来了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
