Question

我有以下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;
}

但没有改变..

提前谢谢

Answer 1

添加以下CSS

.container img { display:block; }

<强> JSFiddle Updated

<强>原因：

这是因为<img>是inline元素，因此为p和y等文本字符留出空间，因为它继承了{{} 1}}

Answer 2

不确定为什么会出现这种情况。我尝试过几件事。以下CSS似乎对我有用：

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

然而，这是一个黑客，因此在我看来并不是一个非常好的做法。但有时你只是不习惯使用黑客......

Answer 3

与这种情况并没有真正的关系，但是对于有人<pre>中包装了<td>的问题，您可能需要设置margin: 0来删除空格。在Hugo中使用代码块时遇到的就是这种情况。

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

3 个答案: