HTML表格行间出现4px空白问题求助

我用Photoshop将一张图片切割为多个区块，尝试通过HTML Table重新拼接。已成功还原图片并消除列间距，但行之间莫名出现4px空白，无法定位原因，请求协助。

我的HTML代码 #

<table cellpadding="0" cellspacing="0" style="border-spacing:0px;border-collapse:collapse;">
            <tr>
                <td  style="height:100px"><img src="layer1.png" /></td>
                <td><img src="layer2.png" /></td>
                <td colspan="2"><img src="layer3.png" /></td>
                <td><img src="layer4.png" /></td>
                <td><img src="layer5.png" /></td>
            </tr>

            <tr>
                <td style="height:100px"><img src="layer6.png" /></td>
                <td rowspan="2"><img src="layer7.png" /></td>
                <td><img src="layer8.png" /></td>
                <td><img src="layer9.png" /></td>
                <td colspan="2"><img src="layer10.png"/></td>
            </tr>

            <tr>
                <td><img src="layer11.png" /></td>
                <td colspan="2" rowspan="2"><img src="layer12.png" /></td>
                <td><img src="layer13.png" /></td>
                <td><img src="layer14.png" /></td>
            </tr>

            <tr>
                <td colspan="2"><img src="layer15.png" /></td>
                <td><img src="layer16.png" /></td>
                <td><img src="layer17.png" /></td>
            </tr>

            <tr><td colspan="3"><img src="layer18.png" /></td>
                <td><img src="layer19.png" /></td>
                <td><img src="layer20.png" /></td>
                <td><img src="layer21.png" /></td>
            </tr>

            <tr>
                <td rowspan="3"><img src="layer22.png" /></td>
                <td><img src="layer23.png" /></td>
                <td><img src="layer24.png" /></td>
                <td><img src="layer25.png" /></td>
                <td><img src="layer26.png" /></td>
                <td><img src="layer27.png" /></td>
            </tr>

            <tr>
                <td><img src="layer28.png" /></td>
                <td><img src="layer29.png" /></td>
                <td><img src="layer30.png" /></td>
                <td><img src="layer31.png" /></td>
                <td colspan="2" rowspan="2"><img src="layer32.png" /></td>
            </tr>
        </table>

问题原因及解决办法 #

行之间出现4px空白的核心原因是img元素默认是inline-block属性，浏览器会将其与文本基线对齐，从而产生微小间隙；部分浏览器的默认样式也可能造成影响。以下是几种可靠的解决方式：

方法1：给所有img添加display:block样式 #

在页面的