使用html删除图像之间的空白区域
[英]removing white space between images using html
问题描述
After reading a number of answers to this problem, it seems none of them have solved the problem. 
在阅读了这个问题的一些答案后，似乎没有人解决了这个问题。 I'm trying to send and email via VerticalResponse and they use html. 我正在尝试通过VerticalResponse发送和发送电子邮件，他们使用HTML。 The message is created stacking multiple images, each with links, but it's supposed to look like one image. 消息创建堆叠多个图像，每个图像都有链接，但它应该看起来像一个图像。 Problem is that the preview looks good and so does viewing it in a webpage, but email display shows white space between each image. 问题是预览看起来很好，在网页中查看也是如此，但电子邮件显示在每个图像之间显示空白。 See http://jsfiddle.net/xMW7N/42/ for code. 有关代码，请参见http://jsfiddle.net/xMW7N/42/ 。 Please help! 请帮忙！
<body>
<div style="text-align: center; ">
<span style="font-size:8pt;"><a href="website"><img align="normal" alt="Facebook - MetricRunFest" border="0" height="126" hspace="-20" name="FB" src="https://141790a61d-custmedia.vresp.com//a091cd9b91/Top.jpg?0.7593426643870771" style="width: 600px; height: 126px;" title="Facebook - MetricRunFest" vspace="0" width="600" /></a></span><br />
<span style="font-size:8pt;"><a href=website"><img align="normal" alt="Metric Runners - Online Photos" border="0" height="205" hspace="-2" name="MetricRunFest - Online Photos" src="https://141790a61d-custmedia.vresp.com//a091cd9b91/Message%20Blank.jpg?0.8384064519777894" style="width: 600px; height: 205px;" title="Metric Runners - Online Photos" vspace="0" width="600" /><br />
<img align="normal" alt="website" border="0" height="127" hspace="-2" src="https://141790a61d-custmedia.vresp.com//a091cd9b91/Message%20Blank_UpsideDown%209.jpg?0.44395816628821194" style="width: 600px; height: 127px;" title="website" vspace="0" width="600" /></a></span><br />
3 个解决方案
解决方案1
1 2012-11-20 20:39:45
Different browsers treat white space differently. 不同的浏览器以不同的方式处 It's good to write everything on 1 line if possible, with no needless spaces or newlines.You can try like this:- 如果可能的话，最好在1行写一切，没有不必要的空格或换行符。你可以尝试这样： -
<span><img src="image1.jpg"></span><span><img src="image2.jpg"></span><span><img src="image3.jpg"></span>
解决方案2
1 2012-11-20 20:53:43
There is a breaking space between every image which is part of the problem. 每个图像之间都有一个间隙，这是问题的一部分。 Also, try giving the images display: block style. 另外，尝试给出图像display: block样式。
解决方案3
0 2012-11-20 20:49:42
Everything I have seen on html emails, and from the experience I have in doing them myself, the best option is using tables, unforunately. 我在html电子邮件中看到的一切，以及我自己做的经验，最好的选择是使用表格，不幸的是。 It can really help with all layout problems. 它可以真正帮助解决所有布局问题。
I'd recommend reading http://24ways.org/2009/rock-solid-html-emails for a lot of tips, including an entire section on images. 我建议阅读http://24ways.org/2009/rock-solid-html-emails以获取很多提示，包括关于图像的整个部分。 Especially using img {display:block;} for Hotmail and align such as <img src="image.jpg" align="right"> instead of floats. 特别是对于Hotmail使用img {display:block;}并align诸如<img src="image.jpg" align="right">而不是浮点数。
Not that you are necessarily doing those parts wrong, but they are good to remember in general. 并不是说你必须把这些部分做错了，但总的来说它们很难记住。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.