一个img标签周围的白色空间

Question

这个问题涉及图片中的黑盒子（它是<th>标签）。

<th>标签最终高度为23px。 图像是18像素×18像素。 5px底部边缘来自何处以及如何摆脱它？

border，padding和margin都设置为0.手动设置<tr>的高度， <th>标签为18px不做任何事情。 低于23px的任何东西都没有效果。

救命！

Answer 1

图像是内联元素，因此它们位于元素的文本行中。 图像在文本的基线上对齐，因此在基线下方有一个用于悬挂字符（如g和j）的装订线。 额外的空间是排水沟。

您可以通过将图像转换为块元素来消除空间。 正如你想要的图像彼此相邻，使用样式float:left; 会使它们阻挡元素并排列它们。

Answer 2

您的html源代码中的图像周围是否有空格？ 如果是，请尝试删除它们：

<th><img src="..." alt="" /></th>

Answer 3

这可能是line-height 。 尝试将其设置为零。 示例HTML：

<table>
    <tbody>
        <tr>
            <td>
                <img src="http://placekitten.com/16/16">
                <img src="http://placekitten.com/16/16">
            </td>
        </tr>
    </tbody>
</table>

和CSS：

td {
    background: #000;
    line-height: 0;
}

实例： http ： //jsfiddle.net/ambiguous/4VMTV/

尝试使用和不使用line-height: 0 ，您应该看到差异。

Answer 4

如果您使用的Chrome或火狐 + 萤火虫 ，您可以用鼠标右键单击该th和检查的元素。 这将提供额外的细节，帮助您确定添加的填充或边距，以及原因。