消除图像之间的垂直空白 [英] Eliminate vertical whitespace between images

问题描述

我正在处理电子邮件模板。代码如下所示：

 < table width =702cellpadding =0 cellspacing =0align =centerid =template> 
< tr> 
< td align =leftvalign =top> 
< img src =/ email / new / top_bar.pngwidth =702height =11alt =border =0> 
< img src =/ email / new / bottom_bar.pngwidth =702height =11alt =border =0> 
< / td> 
< / tr> 
< / table> 
  

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

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

解决方案

你得到空格，因为图像是内联排列的间距）。你可以将它们作为块元素放置....

  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 Reset）...

I am working on e-mail template. Code is something like this :

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

I always get vertical whitespace between these two images.

I tried using valign, vspace but no luck. How to get rid of it?

解决方案

You get whitespace because the images are laid out inline (between two rows of lines there is spacing). You can either lay them out as block elements....

img { display:block; }

.. or you can use the vertical-align property to define a different vertical align which should remove the spacing...

img { vertical-align:top; }

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

BTW, please stop using deprecated attributes (cellpadding, cellspacing, align, border). For each of those attributes there is a CSS alternative which should be used. Also, use some CSS reset code (like Yahoo CSS Reset)...

这篇关于消除图像之间的垂直空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！