如何删除切片图像之间的间距？答案

【问题标题】：How to remove spacing between sliced images?如何删除切片图像之间的间距？
【发布时间】：2022-01-18 07:44:51
【问题描述】：

我在 Photoshop 中为电子邮件通讯制作了一张图片，我将它们链接起来并托管了所有图片。但是当我将它们粘贴到 gmail 中时，它们之间有一个间距。如何删除间距？以下是代码。

https://s10.gifyu.com/images/image7af8bf1d86020f60.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Youtube Logo BW</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body bgcolor="#FFFFFF">
    <!-- Save for Web Slices (Youtube Logo BW.png) -->
    <table id="Table_01" width="1428" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <a href="https://youtube.com">
                    <img id="Youtubex20Logox20BW_01" src="https://s10.gifyu.com/images/Youtube-Logo-BW_01.png" width="1428" height="666" border="0" alt="" /></a></td>
        </tr>
        <tr>
            <td>
                <a href="https://youtube.com">
                    <img id="youtube" src="https://s10.gifyu.com/images/youtubec5155edec989e9ff.png" width="1428" height="499" border="0" alt="" /></a></td>
        </tr>
    </table>
    <!-- End Save for Web Slices -->
    </body>
    </html>

【问题讨论】：

标签： html css email newsletter

【解决方案1】：

https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ 此链接将详细帮助您。

但我认为你应该为内联 css 使用 style 属性。你不能直接在标签中写 bg-color 等。改为使用：

    <body style="bg-color:#FFFFFF;">
<!-- Save for Web Slices (Youtube Logo BW.png) -->
<table id="Table_01" style="width:1428; border=:0; cellpadding:0; cellspacing:0;>
    <tr>
        <td>
            <a href="https://youtube.com">
                <img id="Youtubex20Logox20BW_01" src="https://s10.gifyu.com/images/Youtube-Logo-BW_01.png" style="width:1428; height:666; border:none;" alt="" /></a></td>
    </tr>
    <tr>
        <td>
            <a href="https://youtube.com">
                <img id="youtube" src="https://s10.gifyu.com/images/youtubec5155edec989e9ff.png" style="width:1428; height:499; border:none;" alt="" /></a></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>

然后看看你得到了什么，因为我希望它能解决你的问题。如果您的问题仍然存在，请添加该问题的快照，因为我没有得到您所要求的确切内容。并尝试使用 css 单位作为宽度和高度以获得更好的结果。

【讨论】：

谢谢我应该试试css

【解决方案2】：

table {
border:0px;
border-collapse:collapse;
border-spacing:0px;
}
td a{
display: flex;
}
td,img { 
padding:0px; 
border-width:0px; 
margin:0px; 
}

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Youtube Logo BW</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#FFFFFF">
<!-- Save for Web Slices (Youtube Logo BW.png) -->
<table id="Table_01" width="1428">
    <tr>
        <td>
            <a href="https://youtube.com">
                <img id="Youtubex20Logox20BW_01" src="https://s10.gifyu.com/images/Youtube-Logo-BW_01.png" width="1428" height="666" border="0" alt="" /></a></td>
    </tr>
    <tr>
        <td>
            <a href="https://youtube.com">
                <img id="youtube" src="https://s10.gifyu.com/images/youtubec5155edec989e9ff.png" width="1428" height="499" border="0" alt="" /></a></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

【讨论】：

感谢您的帮助，仍然不明白您在这些代码表中的意思 {border:0px;边框折叠：折叠；边框间距：0px； } td a{ 显示：弹性； } td,img { 填充：0px;边框宽度：0px；边距：0px； }
谢谢@Aman Sharma

【解决方案3】：

这基本上是由于 HTML5 文档类型。当您发送电子邮件时，大多数电子邮件客户端（尤其是网络邮件）只会包含来自 HTML 的 <body> 内部的内容。这意味着您的文档类型被忽略，而是应用来自网络邮件的文档类型。现在大多数网络邮件（如 Gmail 桌面网络邮件、Outlook.com 或 Yahoo 的桌面网络邮件）都使用 HTML5 文档类型。

HTML5 文档类型对现在下方有间距的图像有一个意想不到的副作用。只需将文档类型更改为 HTML5 文档类型，您就可以在本地代码中看到这一点。

您可以通过三种不同的方式解决此问题：

在<img> 元素上以内联样式添加vertical-align:middle。
在 <img> 元素上以内联样式添加 display:block。
将font-size:0 添加到<img> 的父元素中。

我建议使用第一个解决方案，它会给出以下代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Youtube Logo BW</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body bgcolor="#FFFFFF">
    <!-- Save for Web Slices (Youtube Logo BW.png) -->
    <table id="Table_01" width="1428" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <a href="https://youtube.com">
                    <img id="Youtubex20Logox20BW_01" src="https://s10.gifyu.com/images/Youtube-Logo-BW_01.png" width="1428" height="666" border="0" alt="" style="vertical-align:middle;" /></a></td>
        </tr>
        <tr>
            <td>
                <a href="https://youtube.com">
                    <img id="youtube" src="https://s10.gifyu.com/images/youtubec5155edec989e9ff.png" width="1428" height="499" border="0" alt="" style="vertical-align:middle;" /></a></td>
        </tr>
    </table>
    <!-- End Save for Web Slices -->
    </body>
    </html>

如果你想了解更多，这里有两个我写的资源，你可能会感兴趣：

【讨论】：

所以在alt=""和/></a></td>中间需要加上style="vertical-align:middle;"