BeNdErR BeNdErR - 19 days ago 7
CSS Question

table td leaves unwanted space at the bottom

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

Answer

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

Comments