消除图像之间的垂直空白答案

【问题标题】：Eliminate vertical whitespace between images消除图像之间的垂直空白
【发布时间】：2011-04-20 17:33:43
【问题描述】：

我正在处理电子邮件模板。代码是这样的：

<table width="702" cellpadding="0" cellspacing="0" align="center" id="template">
<tr>
<td align="left" valign="top">
<img src="/email/new/top_bar.png" width="702" height="11" alt="" border="0">
<img src="/email/new/bottom_bar.png" width="702" height="11" alt="" border="0">
</td>
</tr>    
</table>

我总是在这两个图像之间得到垂直空白。

我尝试使用 valign、vspace 但没有运气。如何摆脱它？

【问题讨论】：

一个问题，如果表格的宽度小于图像，你如何将这两个图像放在一行中......如果我理解你有垂直空白的问题？？？？如果图像较小且适合内部，则此问题在答案 1 中有解决方案。在您的示例中，图像是一个在另一个之下，并且没有垂直空白
你抓住了我！打字时我拼错了宽度.....我正在纠正它！

标签： html css templates

【解决方案1】：

您会得到空白，因为图像是内联布局的（两行行之间有间距）。您可以将它们布置为块元素....

img { display:block; }

.. 或者您可以使用 vertical-align 属性来定义一个不同的垂直对齐方式，它应该删除间距...

img { vertical-align:top; }

http://vidasp.net/media/CSS-vertical-align.gif

顺便说一句，请停止使用已弃用的属性（单元格填充、单元格间距、对齐、边框）。对于这些属性中的每一个，都有一个应该使用的 CSS 替代方案。另外，使用一些 CSS 重置代码（如 Yahoo CSS Reset）...

【讨论】：

@Šime 他正在构建一个电子邮件，但仍然无法绕过这些属性，因为 CSS 支持非常不稳定
嘿！你的答案显示：块工作完美。谢谢！我正在研究电子邮件模板，90% 的电子邮件客户端只了解 cellpadding、cellspacing、align、border.. 他们还不知道 css3 和 html5。
用 CSS 替换 HTML 属性由来已久，与 CSS 3 无关。我对 HTML 电子邮件了解不多，但如果可以使用 STYLE 元素把 CSS 放在里面，那么你应该可以使用 padding、border、text-align、vertical-align 和其他 CSS 2.1 属性...（当然，只有这些属性支持，你必须检查）跨度>
真的！但大多数电子邮件客户端只了解内联 CSS，而且这是非常有限的属性工作。看看这里：campaignmonitor.com/css
天哪。而且我认为桌面浏览器的跨浏览器兼容性具有挑战性。祝所有这些客户都能得到统一的展示:)

【解决方案2】：

奇怪：这不应该。

也许电子邮件客户端将<img>s 之间的换行解释为空格。

尝试将它们直接相邻设置：<img src...><img src...

【讨论】：

【解决方案3】：

您的行足够高以容纳默认字体的文本，该字体高于您的 11 像素图像，因此存在间隙。

你需要把线条变小；您的示例最简单的方法是缩小字体：

<td style="font-size: 1px;" align="left" valign="top">

在 IE 8、Firefox 3.6 和 Chrome 6 中测试。

【讨论】：