消除图像之间的垂直空白

Question

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

<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 但没有运气。如何摆脱它？

Answer 1

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

img { display:block; }

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

img { vertical-align:top; }

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

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