Question

要求

我想在其上创建一个包含多个超链接的图像，然后通过电子邮件发送给某人。

我做了什么

我使用了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>

问题

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

Answer 1

确保每个表格单元格的填充为0px，然后将border-spacing属性设置为0，将border-collapse属性设置为collapse。默认情况下，表格具有间距，从而产生空格。

Answer 2

<强>答案

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

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

2 个答案: