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

【问题标题】：How to get rid of the extra height in TR and TD when it contains an IMG element?当 TR 和 TD 包含 IMG 元素时，如何摆脱额外的高度？
【发布时间】：2014-08-11 16:54:55
【问题描述】：

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

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

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

这是 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;
}

【问题讨论】：

标签： html css

【解决方案1】：

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

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

jsFiddle example

【讨论】：

@ZenOut 内联元素的默认垂直对齐方式是基线，这为像g、y和j这样的下行文本元素保留了一点间隙。更改对齐方式可消除该间隙。

【解决方案2】：

您需要将单元格填充和单元格间距设置为 0 并“折叠”

Set cellpadding and cellspacing in CSS?

【讨论】：

【解决方案3】：

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

table {
    border-collapse:collapse;
}

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

【讨论】：