BeNdErR BeNdErR - 1 year ago 76
CSS Question

table td leaves unwanted space at the bottom

I have the following html

<div class="container">
<img src="http://.../baking-potato.jpg" />

cell is not wrapping "perfectly" the
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

border-spacing: 0 px;
border-collapse: collapse;

but nothing changed..

Thank you in advance

Answer Source

Add the following CSS

.container img { display:block; }

JSFiddle Updated


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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download