在表细胞的神秘填料与图象

Question

我不想承认这一点:我正在构建一个复杂的,但gmail友好的HTML电子邮件爆炸(内联样式).无论如何,这是一个桌子和分割图像的游戏,我似乎已经忘记了我所有的1995年表mojo.

http://www.highgatecross.com/development/tables/

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td><img src="skyline.jpg" alt=""></td>
        <td><img src="skyline-02.jpg" alt=""></td>
        <td><img src="skyline-03.jpg" alt=""></td>
    </tr>
    <tr>
        <td colspan="3"><img src="skyline-04.jpg" alt=""></td>
     </tr>
</table>

我在每个图像下面都有一个神秘的4像素"填充"(Firebug中的DOM面板显示的单元格"clientHeight"比我的图像大4个像素).

我已经尝试了各种已弃用的HTML样式(高度等)和CSS的组合,并没有任何乐趣.

那么,简单地说,我如何摆脱4个像素并缩小行之间的差距？

Answer 1

只需 在图像上使用即可style="display: block" .

问题解决了.

Answer 2

我应该先检查StackOverflow!

或者:

<img src="some.jpg" style="display: block" />

要么

<img src="some.jpg" style="vertical-align: bottom" />

将消除表格单元格中图像下的4个像素.

Answer 3

我摆弄了许多属性,似乎设置line-height: 0消除了差距.