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

顺便说一下，请停止使用已弃用的属性（cellpadding，cellspacing，align，border）。对于每个属性，都应该使用CSS替代方案。此外，使用一些CSS重置代码（如Yahoo CSS重置）......

Answer 2

奇怪：这不应该是。

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

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

Answer 3

您的线条足够高，可容纳默认字体中的文字，该字体高于您的11像素图像，因此存在差距。

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

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

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

消除图像之间的垂直空白

3 个答案: