如何解决 HTML 中图像之间的空白问题？答案

【问题标题】：How to fix this whitespace issue between images in HTML?如何解决 HTML 中图像之间的空白问题？
【发布时间】：2016-12-02 22:48:42
【问题描述】：

要求

我想创建一个带有多个超链接的图像并将其通过电子邮件发送给某人。

我做了什么

我使用了 Photoshop 的切片方法并将 URL 添加到切片中。我为网络保存了作品。为了让它在我的接收者端工作，我将每个切片上传到一个在线照片托管网站，并将 HTML 标签 img src="local photo location" 编辑为 img src = "online photo location"。但问题是我在每个切片之间有多个空白，这会扭曲整个图像。

代码

    <html>
    <head>
    <title>General Infosheet July 25</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (General Infosheet July 25.jpg) -->
    <table id="Table_01" width="800" height="1034" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <a href="http://facebook.com/">
                    <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_01_zpsgxd25oae.jpg" width="539" height="158" border="0" alt=""></a></td>
            <td rowspan="2">
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/StackOverflow-Version_02_zpsmqhre1ll.jpg" width="260" height="452" alt=""></td>
            <td>
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="158" alt=""></td>
        </tr>
        <tr>
            <td rowspan="4">
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/StackOverflow-Version_03_zpsnfkulzvt.jpg" width="539" height="876" alt=""></td>
            <td>
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="294" alt=""></td>
        </tr>
        <tr>
            <td>
                <a href="http://twitter.com/">
                    <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_04_zps239b1stn.jpg" width="260" height="144" border="0" alt=""></a></td>
            <td>
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="144" alt=""></td>
        </tr>
        <tr>
            <td>
                <a href="http://instagram.com/">
                    <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_05_zpsuwqhoawm.jpg" width="260" height="134" border="0" alt=""></a></td>
            <td>
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="134" alt=""></td>
        </tr>
        <tr>
            <td>
                <a href="http://photobucket.com/">
                    <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_06_zpsiwxkb9ty.jpg" width="260" height="304" border="0" alt=""></a></td>
            <td>
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="304" alt=""></td>
        </tr>
    </table>
    <!-- End Save for Web Slices -->
    </body>
    </html>

问题

我想删除图像之间的空白。请提供有助于删除这些空白的代码编辑。

【问题讨论】：

把代码扔出去。白手起家。不要使用表格进行布局。这不是 1997 年。现在 Web 浏览器很好地支持 CSS。也不要编写无效的 HTML：validator.w3.org/nu
图片包含空白
@Quentin：问题提到了电子邮件，而不是网络浏览器。标签应该是固定的。

标签： html image web html-table photoshop

【解决方案1】：

确保每个表格单元格的内边距为0px，然后将border-spacing属性设置为0，将border-collapse属性设置为collapse。默认情况下，表格有间距，导致空格。

【讨论】：

【解决方案2】：

回答

我能够通过在 Hotmail 中检查电子邮件的正文部分，然后将整个 HTML 代码粘贴到检查器中来解决这个问题。这样，代码不会由 Outlook 解释，而是由 Web 浏览器引擎解释。因此，对于任何试图通过电子邮件发送复杂 HTML 代码的人来说，这可能是一个可靠的解决方案。

【讨论】：