css - 表格单元格中不需要的底部填充 - Thinbug

表格单元格中不需要的底部填充

时间：2013-03-29 15:00:37

标签： css

<!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中）。请告诉我如何摆脱它。这是fiddle。

1 个答案:

答案 0 :(得分：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时，它会视为常规的盒子模型。这只是我的观点。