使用html删除图像之间的空白答案

【问题标题】：removing white space between images using html使用html删除图像之间的空白
【发布时间】：2012-11-21 04:53:43
【问题描述】：

在阅读了许多关于这个问题的答案后，似乎没有一个人解决了这个问题。我正在尝试通过 VerticalResponse 发送和发送电子邮件，他们使用 html。该消息是堆叠多个图像创建的，每个图像都有链接，但它应该看起来像一个图像。问题是预览看起来不错，在网页中查看也是如此，但电子邮件显示在每个图像之间显示空白。代码见http://jsfiddle.net/xMW7N/42/。请帮忙！

<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 />

【问题讨论】：

标签： html

【解决方案1】：

不同的浏览器对空白的处理方式不同。如果可能的话，最好将所有内容写在 1 行上，没有不必要的空格或换行符。你可以这样尝试：-

  <span><img src="image1.jpg"></span><span><img src="image2.jpg"></span><span><img src="image3.jpg"></span>

【讨论】：

我不同意将它保持在一条线上是“最好的”，但是它确实解决了一些电子邮件的空白问题，因为大多数电子邮件客户端都是垃圾。
我只是认为我们必须区分电子邮件和网络/其他的开发，因为在为电子邮件客户端开发时，您必须解决一些奇怪的问题——其中一个是奇怪的空白错误，有时可以通过一个班轮解决。

【解决方案2】：

每个图像之间都有一个中断空间，这是问题的一部分。另外，尝试赋予图像display: block 样式。

http://jsfiddle.net/xMW7N/47/

【讨论】：

谢谢！它看起来不错并且显示正确，直到它最终出现在 gmail 中。也许这就是问题所在，否则它看起来很棒。

【解决方案3】：

我在 html 电子邮件中看到的所有内容，以及我自己做这些邮件的经验，不幸的是，最好的选择是使用表格。它确实可以帮助解决所有布局问题。

我建议阅读http://24ways.org/2009/rock-solid-html-emails 以获取很多提示，包括有关图像的整个部分。特别是使用img {display:block;} 用于Hotmail 和align，例如<img src="image.jpg" align="right">，而不是浮动。

并不是说您一定做错了这些部分，但总的来说它们很容易记住。

【讨论】：