Spacing in a table

问题

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

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?

回答1:

Add

vertical-align: top;

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.

来源：https://stackoverflow.com/questions/23621775/spacing-in-a-table