表 td 在底部留下不需要的空间答案

【问题标题】：table td leaves unwanted space at the bottom表 td 在底部留下不需要的空间
【发布时间】：2013-12-19 07:54:01
【问题描述】：

我有以下html

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

td 单元格没有“完美”包裹div+img 内容：从this fiddle 可以看出，单元格底部有一个边距，由黑色背景突出显示。

我怎样才能摆脱不需要的边距？我尝试了以下css属性

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

但什么都没有改变..

提前谢谢你

【问题讨论】：

Remove spacing between table cells and rows的可能重复

标签： html css html-table

【解决方案1】：

添加以下CSS

.container img { display:block; }

JSFiddle Updated

原因：

发生这种情况是因为<img> 是inline 元素，因此会为p 和y 等文本字符留出空间，因为它继承了line-height

【讨论】：

这就是原始的 JSFiddle。我认为你需要点击更新。

【解决方案2】：

不知道为什么会出现这种情况。我已经尝试了几件事。以下 CSS 似乎对我有用：

.container img {
    margin-bottom: -5px;
}

但是，这是一种 hack，因此在我看来并不是一个很好的做法。但有时你就是不使用 hacks...

【讨论】：

not a really good practise in my opinion。你去了，可能值得一读:)

【解决方案3】：

与此案例无关，但对于在 <td> 中遇到 <pre> wrapperd 问题的人，您可能需要设置 margin: 0 以删除空间。这是我在 hugo 中使用 codeblock 时遇到的情况。

【讨论】：