【发布时间】：2022-01-23 09:16:29
【问题描述】：
出于练习目的，我在 Photoshop 中制作了电子邮件签名，我将它们链接起来并托管了所有图像。但是当我将它们粘贴到 gmail 中时，它们之间有一个间距。如何删除间距？我将style="vertical-align:middle;" 放在alt="" 和/></td> 的中间以删除空格，但所有图像都打乱了。
这是原始代码。
<!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>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#FFFFFF">
<!-- Save for Web Slices (Untitled-1) -->
<table id="Table_01" width="1021" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img id="top" src="https://s10.gifyu.com/images/top.png" width="1021" height="132" alt="" /></td>
</tr>
<tr>
<td rowspan="5">
<img id="left" src="https://s10.gifyu.com/images/left.png" width="437" height="359" alt="" /></td>
<td>
<a href="tel: 123 456 78901">
<img id="Phone" src="https://s10.gifyu.com/images/Phone.png" width="407" height="47" border="0" alt="" /></a></td>
<td rowspan="5">
<img id="right" src="https://s10.gifyu.com/images/right.png" width="177" height="359" alt="" /></td>
</tr>
<tr>
<td>
<a href="mailto:hello@reallygreatsite.com">
<img id="Email" src="https://s10.gifyu.com/images/Email.png" width="407" height="52" border="0" alt="" /></a></td>
</tr>
<tr>
<td>
<a href="https://reallygreatsite.com">
<img id="website" src="https://s10.gifyu.com/images/website.png" width="407" height="60" border="0" alt="" /></a></td>
</tr>
<tr>
<td>
<img id="Untitled_1_07" src="https://s10.gifyu.com/images/Untitled-1_07.png" width="407" height="83" alt="" /></td>
</tr>
<tr>
<td>
<img id="middlex20img" src="https://s10.gifyu.com/images/middle-img.png" width="407" height="117" alt="" /></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>这里是我放style="vertical-align:middle;"的代码
<!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>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#FFFFFF">
<!-- Save for Web Slices (Untitled-1) -->
<table id="Table_01" width="1021" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img id="top" src="https://s10.gifyu.com/images/top.png" width="1021" height="132" alt="" style="vertical-align:middle;" /></td>
</tr>
<tr>
<td rowspan="5">
<img id="left" src="https://s10.gifyu.com/images/left.png" width="437" height="359" alt="" style="vertical-align:middle;" /></td>
<td>
<a href="tel: 123 456 78901">
<img id="Phone" src="https://s10.gifyu.com/images/Phone.png" width="407" height="47" border="0" alt="" style="vertical-align:middle;" /></a></td>
<td rowspan="5">
<img id="right" src="https://s10.gifyu.com/images/right.png" width="177" height="359" alt="" style="vertical-align:middle;" /></td>
</tr>
<tr>
<td>
<a href="mailto:hello@reallygreatsite.com">
<img id="Email" src="https://s10.gifyu.com/images/Email.png" width="407" height="52" border="0" alt="" style="vertical-align:middle;" /></a></td>
</tr>
<tr>
<td>
<a href="https://reallygreatsite.com">
<img id="website" src="https://s10.gifyu.com/images/website.png" width="407" height="60" border="0" alt="" style="vertical-align:middle;" /></a></td>
</tr>
<tr>
<td>
<img id="Untitled_1_07" src="https://s10.gifyu.com/images/Untitled-1_07.png" width="407" height="83" alt="" style="vertical-align:middle;" /></td>
</tr>
<tr>
<td>
<img id="middlex20img" src="https://s10.gifyu.com/images/middle-img.png" width="407" height="117" alt="" style="vertical-align:middle;" /></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>【问题讨论】：
-
“但是所有的图像都被打乱了” - 这应该意味着现在，究竟是什么？我用你的代码创建了可执行的 sn-ps，第二个版本到底应该有什么问题？
-
你为什么不把它做成一张图片作为背景图片和右边部分的文字
标签： html css email newsletter e-signature