table td在底部留下不需要的空间

Question

我有以下HTML

<table>
    <tr>
        <td>
            <div class="container">
                <img src="http://.../baking-potato.jpg" />
            </div>
        </td>
    </tr>
</table>

该td电池是不是包裹"完美"的div+img内容:你可以看到从这个小提琴,还有在细胞底部的保证金,由黑色背景高亮显示.

如何摆脱不必要的保证金？我尝试了以下css属性

table{
    border-spacing: 0 px;
    border-collapse: collapse;
}

但没有改变..

先感谢您

Answer 1

添加以下内容 CSS

.container img { display:block; }

JSFiddle更新

原因:

这是因为一个<img>是一个inline元素,因此留出空间的文本字符,如p和y例如,因为它是继承line-height