Additional whitespace in HTML table cell
cell, css, html, html-table
Solution
The image behaves, by default, as a text-character, with a gap at the bottom to display the over-hang of a letter (its descender).
Use the vertical-align property to get rid of it:
img {
vertical-align: middle;
}
Problem
I can't find out why the most simple example of a table cell fails miserably (in FF29). Please see http://jsfiddle.net/aYWG9/: ``` <body> <table style="border-spacing:0"> <tr> <td style="background:red;padding:0;margin:0;border:0"> <img src="http://rufiojones.files.wordpress.com/2011/08/foghorn_leghorn.gif"/> </td> </tr> </table> </body ``` Where do the extra 5px come from, and how can I remove the red space? (Don't tell me to change the color!)