html - How to avoid White line between img and td bottom?

Question

I have made a banner img in a td element. I have included a reset script to remove all margins, paddings and spaces everywhere.

<td><img /></td>

http://jsfiddle.net/227JH/

But there still is being showed a blank line. How can I remove the blank line?

Answer 1

The default vertical-align property for an img element is baseline.

Changing it to top, middle or bottom fixes the issue.

jsFiddle example

td img {
    vertical-align:top;
}

Alternatively, you can also add display:block to the img element.

jsFiddle example

td img {
    display:block;
}