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

Question

要求

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

我做了什么

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

代码

    <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/Whosebug/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/Whosebug/Whosebug-Version_02_zpsmqhre1ll.jpg" width="260" height="452" alt=""></td>
            <td>
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/Whosebug/spacer_zpsfueep0xe.gif" width="1" height="158" alt=""></td>
        </tr>
        <tr>
            <td rowspan="4">
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/Whosebug/Whosebug-Version_03_zpsnfkulzvt.jpg" width="539" height="876" alt=""></td>
            <td>
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/Whosebug/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/Whosebug/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/Whosebug/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/Whosebug/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/Whosebug/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/Whosebug/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/Whosebug/spacer_zpsfueep0xe.gif" width="1" height="304" alt=""></td>
        </tr>
    </table>
    <!-- End Save for Web Slices -->
    </body>
    </html>

问题

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

Answer 1

确保每个 table 单元格的填充为 0px，然后将 border-spacing 属性设置为 0，将 border-collapse 属性至 collapse。表格默认有间距，导致空白。

Answer 2

回答

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

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

How to fix this whitespace issue between images in HTML?

html

photoshop

html-table

image

web