Html 删除表格中图像之间的空白
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11117950/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing White Spacing Between Images in a Table
提问by user1468930
I know this has been covered before but the solutions didn't help me - i'm not a programmer but i can handle basic HTML code. I am trying to send a HTML email out that has 11 images placed in a table to become one big image - however white lines appear between rows when i send it.
我知道这之前已经涵盖过，但解决方案对我没有帮助 - 我不是程序员，但我可以处理基本的 HTML 代码。我正在尝试发送一封 HTML 电子邮件，其中包含 11 张放在表格中的图像以成为一个大图像 - 但是当我发送时，行之间会出现白线。
I have the table style set with border="0" cellpadding="0" cellspacing="0"but this doesn't help - can anyone please give me advice? Also as i am not a programmer I may not understand any complex answers!
我设置了表格样式，border="0" cellpadding="0" cellspacing="0"但这没有帮助 - 谁能给我建议？此外，由于我不是程序员，我可能无法理解任何复杂的答案！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled document</title>
</head>
<body>
<!-- Save for Web Slices (toast offer mailer 2.jpg) -->
<table style="height: 920px;" id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2"><a href="http://www.metroplan.co.uk/2012/#/4/"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_01.jpg" width="236" height="201" border="0" style="border: 0;"></a></td>
<td colspan="3"><a href="http://www.metroplan.co.uk/2012/#/78/"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_02.jpg" width="177" height="201" border="0" style="border: 0;"></a></td>
<td colspan="2"><a href="http://www.metroplan.co.uk/2012/#/10/"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_03.jpg" width="237" height="201" border="0" style="border: 0;"></a></td>
</tr>
<tr>
<td><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_04.jpg" width="152" height="155"></td>
<td colspan="3"><a href="http://www.metroplan.co.uk/2012/#/116/"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_05.jpg" width="173" height="155" border="0" style="border: 0;"></a></td>
<td colspan="2"><a href="http://www.metroplan.co.uk/2012/#/42/"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_06.jpg" width="180" height="155" border="0" style="border: 0;"></a></td>
<td><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_07.jpg" width="145" height="155"></td>
</tr>
<tr>
<td colspan="7"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_08.jpg" width="650" height="237"></td>
</tr>
<tr>
<td colspan="7"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_09.jpg" width="650" height="231"></td>
</tr>
<tr>
<td colspan="3"><a href="http://www.metroplan.co.uk/"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_10.jpg" width="314" height="95" border="0" style="border: 0;"></a></td>
<td colspan="4"><a href="mailto:[email protected]"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_11.jpg" width="336" height="95" border="0" style="border: 0;"></a></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="152" height="1"></td>
<td><img src="images/spacer.gif" width="84" height="1"></td>
<td><img src="images/spacer.gif" width="78" height="1"></td>
<td><img src="images/spacer.gif" width="11" height="1"></td>
<td><img src="images/spacer.gif" width="88" height="1"></td>
<td><img src="images/spacer.gif" width="92" height="1"></td>
<td><img src="images/spacer.gif" width="145" height="1"></td>
</tr>
</tbody>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
回答by Ankit
On images, try using
在图像上，尝试使用
style="display:block"
It should work.
它应该工作。
回答by Shadow Wizard is Ear For You
From quick check I just did, looks like the problem is due to blank space inside the cells markup taking up some place and making the cells bigger.
从我刚刚做的快速检查来看，问题似乎是由于单元格标记内的空白占据了一些位置并使单元格变大。
One way around this is setting the font size of the cells to 0 thus eliminating that extra space.
解决此问题的一种方法是将单元格的字体大小设置为 0，从而消除多余的空间。
Live test case with the fix applied.
In your case, try adding this to the HTML you send:
在您的情况下，尝试将其添加到您发送的 HTML 中：
<style type="text/css">
table td { font-size: 0px; }
</style>
This is assuming you have only one table and all cells have only images, if you have more tables then give that specific table ide.g. <table id="MyImagesTable">then change to:
这是假设您只有一个表格并且所有单元格都只有图像，如果您有更多表格，则给出该特定表格，id例如<table id="MyImagesTable">然后更改为：
#MyImagesTable td { font-size: 0px; }
If the email client of those getting the email does not support style sheets you will have to manually set it for each cell:
如果收到电子邮件的电子邮件客户端不支持样式表，则必须为每个单元格手动设置：
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 0px;">...</td>
<td style="font-size: 0px;">...</td>
<td style="font-size: 0px;">...</td>
</tr>
<!-- ...more rows... -->
</table>
回答by Prashant Tapase
I also face same problem.
我也面临同样的问题。
But i tried
但我试过了
<img src ="images/xyz.jpg" style="display:block">
and solved
并解决了
回答by Luis Fernando
This problem is common on many mail clients, just use:
此问题在许多邮件客户端上很常见，只需使用：
<img style="display:block" />
on every image in your HTML.
在 HTML 中的每个图像上。
回答by freefaller
Without actually having seen your code, I would guess that you're seeing spaces between your images because you have actual space between your images.
在没有真正看到您的代码的情况下，我猜您会在图像之间看到空格，因为您的图像之间有实际空间。
If you have something like this...
如果你有这样的事情...
<img src="image1.jpg">
<img src="image2.jpg">
Change it to... (note there is no space between the two image tags)
将其更改为...（注意两个图像标签之间没有空格）
<img src="image1.jpg"><img src="image2.jpg">
If you are placing the images within individual cells (i.e. one image per cell) then try putting the CSS of border-collapse:collapse...
如果您将图像放置在单个单元格中（即每个单元格一个图像），请尝试将 CSS 放在border-collapse:collapse...
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
UPDATE
更新
As @Shadow has pointed out, neither parts of the above will make any difference.
正如@Shadow 所指出的，上述任何部分都不会产生任何影响。
It appears that FireFox and Chrome deal with the image as it would text (for some reason), therefore his suggestion of table td { font-size:0px; }is IMHO the correct answer. (IE doesn't seem to be effected by the issue.)
FireFox 和 Chrome 似乎像处理文本一样处理图像（出于某种原因），因此他的建议table td { font-size:0px; }是恕我直言是正确的答案。（IE 似乎不受此问题的影响。）
回答by BLEX
A lot of this is flat out ignored by certain mail clients. This is always the risk you take in heavy graphic html emails. You are almost guaranteed to have recipients that see it incorrectly. I always encourage my clients to not ask for these kind of email designs that are 6-12 images grouped up in a table. However, there will always be the ones that insist it be done and even after I show them the results in multiple mail clients they still request it be done.
某些邮件客户端完全忽略了其中的很多内容。这始终是您在繁重的图形 html 电子邮件中承担的风险。几乎可以保证您的收件人会错误地看到它。我总是鼓励我的客户不要要求这种将 6-12 张图像分组在表格中的电子邮件设计。但是，总会有人坚持要完成，即使我在多个邮件客户端中向他们展示了结果，他们仍然要求完成。
Avoid it if you can. Unfortunately, there is really no guaranteed fix.
如果可以，请避免它。不幸的是，确实没有保证的修复。
If you are sending the email to a group of recipients that are all in the same mail client you can probably solve it with one of the codes above to find the one your mail client responds to best.
如果您将电子邮件发送给所有在同一邮件客户端中的一组收件人，您可能可以使用上述代码之一解决问题，以找到您的邮件客户端响应最佳的那个。
回答by mikeg
a lot of times it could be user error. when you slice in photoshop, make sure ALL SLICES ARE TOUCHING. if there is a 1px gap, then that will screw everything up!!!
很多时候可能是用户错误。当您在 photoshop 中切片时，请确保所有切片都在触摸。如果有 1px 的差距，那么一切都会搞砸！！！
also, here's a trick i learned....
另外，这是我学到的一个技巧......
Set all images to have a border="0" tag after the alt=""...
将所有图像设置为在 alt="" 之后有一个 border="0" 标签...
if there are any ** ** tags, and i mean only , not
如果有任何 ** ** 标签，我的意思是只有，没有
so for example....
所以例如....
try that, and make sure all images have border="0" and all tags have a set width, all slices are touching, and you should have 0 gaps.
尝试这样做，并确保所有图像都具有 border="0" 并且所有标签都有一个设置的宽度，所有切片都在接触，并且您应该有 0 个间隙。
