0 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8"/>
    <title>Moravský kras</title>
</head>
<body>
    <table style="border-spacing: 0px">
    <tr>
        <td style="padding: 0px"><img src="http://placehold.it/150x150"></td>
    </tr>
    </table>
</body>
</html>

使用这个简单的代码，我在图像下方的表格单元格中得到了一些底部填充（至少在 firefox/chrome 中）。请告诉我如何摆脱它。这是一个小提琴。

4

1 回答 1

2

这是因为自然而然的img存在inline。让它block。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8"/>
    <title>Moravský kras</title>
</head>
<body>
    <table style="border-spacing: 0px">
    <tr>
        <td style="padding: 0px"><img src="http://placehold.it/150x150" style="display: block;"></td>
    </tr>
    </table>
</body>
</html>

小提琴：http: //jsfiddle.net/praveenscience/ZWwTu/1/

解释

图像元素就是这样一种元素，它既具有出现的性质，又inline具有盒子模型。所以，这与vertical-align精神有关。当你给block显示时，它被当作一个普通的盒子模型。这只是我的看法。

于 2013-03-29T15:03:11.233 回答