table td leaves unwanted space at the bottom
css, html, html-table
Solution
Add the following `CSS`
`.container img { display:block; }`
JSFiddle Updated
Reason:
This happens because an `<img>` is an `inline` element, and therefore leaves space for text characters like `p` and `y` for example, because it is inheriting the `line-height`
Problem
I have the following html ``` <table> <tr> <td> <div class="container"> <img src="http://.../baking-potato.jpg" /> </div> </td> </tr> </table> ``` The `td` cell is not wrapping "perfectly" the `div+img` content: as you can see from this fiddle, there's a margin in the bottom of the cell, highlighted by the black background. How can I get rid of that unwanted margin? I tried the following css properties ``` table{ border-spacing: 0 px; border-collapse: collapse; } ``` but nothing changed.. Thank you in advance