Question

我有这个时事通讯标记：

<table width="600" align="center" cellpadding="0"  style="font-family:verdana,'Myriad Pro', Arial; border-collapse:collapse; border-spacing:0;">
    <tr valign="bottom" height="127" style="padding:0;text-align:left;vertical-align:bottom;margin:0;margin-bottom:-2px;" >
        <td height="141" valign="bottom">
                            <img width="608" height="141" src="http://toniweb.us/m/demos/headPildoraLarge.png" />                                
        </td>
    </tr>
    <tr>
                      /*Rest of table ommited*/
    </tr>

问题是在<tr>包含headPildoraLarge.png img后，底部有一个~2px的间隙，我无法删除...

这在Outlook IE 5,6,7（不在FF，IE8或其他版本中）中可见，但在这种情况下是tarjet ....

如何消除差距？

完整的HTML动作：http://toniweb.us/m/demos/

Answer 1

在你的css中写下这个：

img{
 border:0;
 vertical-align:top;
}

Answer 2

只需将该图片的vertical-align: bottom添加到您的样式表中，就像这样：

td img {
  vertical-align: bottom;
}

有关详细信息，请阅读this great article。您看到的差距是字体的基线和底线之间的差异，因为默认情况下内联图像与基线对齐。

Answer 3

尝试在图像上提供以下样式

<img width="608" height="141" src="http://toniweb.us/m/demos/headPildoraLarge.png" style="vertical-align:bottom;" />

空格/边框不会在表格tr中消失

3 个答案: