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

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消除了差距。

Answer 4

另一种解决方法是在font-size: 0上添加td。