Question

我在这个JSFiddle中演示了我的问题：http://jsfiddle.net/6jJaF/

如果右键单击图像周围的红色单元格，然后单击“检查元素”，即使IMG元素的高度为200px，也会看到TR和TD元素每个高度为205px。为什么它的高度大于图像？如何摆脱这个额外的高度？

如果TD元素的内容是文本而不是IMG，则不会出现此问题，如本例中的第二个表中所示。

这是HTML代码。

<table>
    <tr>
        <td><img src="http://i.imgur.com/dj7aqdo.jpg"/></td>
    </tr>
</table>

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

这是CSS代码。

td {
    padding: 0;
    background: red;
    height: 200px;
}

img {
    height: 200px;
}

Answer 1

设置图像的垂直对齐方式。例如：

img {
    height: 200px;
    vertical-align:top;
}

<强> jsFiddle example

Answer 2

您需要将单元格填充和单元格间距设置为0并且＆＃34;折叠＆＃34;

Set cellpadding and cellspacing in CSS?

Answer 3

只需将其添加到您当前的CSS：

table {
    border-collapse:collapse;
}

演示： http://jsfiddle.net/6jJaF/2/

当它包含IMG元素时如何摆脱TR和TD的额外高度？

3 个答案: