如何消除图像之间的间距？
Posted
技术标签:
【中文标题】如何消除图像之间的间距？【英文标题】：How to remove spacing between images? 【发布时间】：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" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img id="top" src="https://s10.gifyu.com/images/top.png" /></td>
</tr>
<tr>
<td rowspan="5">
<img id="left" src="https://s10.gifyu.com/images/left.png" /></td>
<td>
<a href="tel: 123 456 78901">
<img id="Phone" src="https://s10.gifyu.com/images/Phone.png" border="0" /></a></td>
<td rowspan="5">
<img id="right" src="https://s10.gifyu.com/images/right.png" /></td>
</tr>
<tr>
<td>
<a href="mailto:hello@reallygreatsite.com">
<img id="Email" src="https://s10.gifyu.com/images/Email.png" border="0" /></a></td>
</tr>
<tr>
<td>
<a href="https://reallygreatsite.com">
<img id="website" src="https://s10.gifyu.com/images/website.png" border="0" /></a></td>
</tr>
<tr>
<td>
<img id="Untitled_1_07" src="https://s10.gifyu.com/images/Untitled-1_07.png" /></td>
</tr>
<tr>
<td>
<img id="middlex20img" src="https://s10.gifyu.com/images/middle-img.png" /></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" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img id="top" src="https://s10.gifyu.com/images/top.png" style="vertical-align:middle;" /></td>
</tr>
<tr>
<td rowspan="5">
<img id="left" src="https://s10.gifyu.com/images/left.png" style="vertical-align:middle;" /></td>
<td>
<a href="tel: 123 456 78901">
<img id="Phone" src="https://s10.gifyu.com/images/Phone.png" border="0" style="vertical-align:middle;" /></a></td>
<td rowspan="5">
<img id="right" src="https://s10.gifyu.com/images/right.png" 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" border="0" 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" border="0" style="vertical-align:middle;" /></a></td>
</tr>
<tr>
<td>
<img id="Untitled_1_07" src="https://s10.gifyu.com/images/Untitled-1_07.png" style="vertical-align:middle;" /></td>
</tr>
<tr>
<td>
<img id="middlex20img" src="https://s10.gifyu.com/images/middle-img.png" style="vertical-align:middle;" /></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>【问题讨论】：
“但是所有的图像都被打乱了” - 这应该意味着现在，究竟是什么？我用你的代码创建了可执行的 sn-ps，第二个版本到底应该有什么问题？ 你为什么不把它做成一张图片作为背景图片和右边部分的文字 【参考方案1】：把style="vertical-align:middle;"放在alt=""和/></td>中间去掉空格是正确的。 ↓↓↓↓↓
经过几天的研究我终于知道了问题，文件的扩展名是xhtml（Email Signature.xhtml）而不是html（Email Signature.html），如果将文件的扩展名从html更改为xhtml结果的代码不正确（加扰）。
如果您已经将文件扩展名从 html 更改为 xhtml，您可以通过将代码复制到新的 html、txt 文件或在线 html 运行器中来保存代码。
这些都是正确的
<!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" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img id="top" src="https://s10.gifyu.com/images/top.png" style="vertical-align:middle;" /></td>
</tr>
<tr>
<td rowspan="5">
<img id="left" src="https://s10.gifyu.com/images/left.png" style="vertical-align:middle;" /></td>
<td>
<a href="tel: 123 456 78901">
<img id="Phone" src="https://s10.gifyu.com/images/Phone.png" border="0" style="vertical-align:middle;" /></a></td>
<td rowspan="5">
<img id="right" src="https://s10.gifyu.com/images/right.png" 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" border="0" 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" border="0" style="vertical-align:middle;" /></a></td>
</tr>
<tr>
<td>
<img id="Untitled_1_07" src="https://s10.gifyu.com/images/Untitled-1_07.png" style="vertical-align:middle;" /></td>
</tr>
<tr>
<td>
<img id="middlex20img" src="https://s10.gifyu.com/images/middle-img.png" style="vertical-align:middle;" /></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
【讨论】：
在一个好的答案中应该避免使用内联样式。请尽可能使用 CSS。以上是关于如何消除图像之间的间距？的主要内容，如果未能解决你的问题，请参考以下文章
matplotlib pyplot imshow 图像之间的紧密间距
R语言ggplot2可视化自定义图例标签间距实战：自定义图例标签间距自定义图例与图像之间的间距