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

Question

此问题涉及图片中的黑框（它是<th>标记）。

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

边框，填充和边距都设置为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或Firefox + Firebug，则可以右键单击th并检查元素。这将提供额外的细节，帮助您确定添加的填充或边距，以及原因。