间隔在表中 [英] Spacing in a table

问题描述

我试图在html中设置一个表。下面是它的一部分的截图。

I'm trying to setup a table in html. Below is a screenshot of part of it.

正如你所看到的，在图像和下面的单元格之间有一个水平的白色条纹，我无法摆脱。我已经尝试以下（bit ott我知道 - 但我正在沮丧！）

As you can see, there is a horizontal white strip between the image and the cell below, which I cannot get rid of. I have tried the following (bit ott I know - but I'm getting right frustrated!)

<table style="text-align: center; border: 0; background-color: #ffffff; padding: 0; margin: 0; border-collapse: collapse; ">
    <tr style="text-align: center; border: 0; background-color: #ffffff; padding: 0; margin: 0; border-collapse: collapse; ">
        <td width="200px" height="175px"  style="text-align: center; border: 0; background-color: #ffffff; padding: 0; margin: 0; border-collapse: collapse; "> 
            <img src="img" style="display: block; padding: 0; border: 0;" /> 
        </td>
    </tr>
    <tr style="text-align: center; border: 0; background-color: #ffffff; padding: 0; margin: 0; border-collapse: collapse; ">
        <td width="200px" height="25px"  style="text-align: center; border: 0; background-color: #535152; color: #fffdfe; padding: 0; margin: 0; border-collapse: collapse; ">
            Text
        </td>
    </tr>
</table>

这是基于我得到的 - 只是更简单。关于我如何摆脱这种差距的任何想法？

This is based on what I've got - just more simple. Any ideas on how I can get rid of that gap?

推荐答案

添加

vertical-align: top;

添加到图像的元素样式。这是因为图片被视为文字，因此line-height和font-size也会生效。

to the element style of the image. That's because the image is treated as text and so line-height and font-size also take effect.

这篇关于间隔在表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！