table td leaves unwanted space at the bottom

Question

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

possible duplicate of [Remove spacing between table cells and rows](http://stackoverflow.com/questions/8479090/remove-spacing-between-table-cells-and-rows) — Pbk1303, Dec 03 '13 at 10:13

Nick R · Accepted Answer · 2013-12-03T10:16:03.057

18

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

edited Dec 03 '13 at 10:16

answered Dec 03 '13 at 10:10

Nick R

7,704
2
22
32

1

That's the original JSFiddle. I think you need to click Update. – ADTC Dec 03 '13 at 10:15

score 0 · Answer 2 · answered Dec 03 '13 at 10:15

0

Not sure why this occours here. I have tried several things. The following CSS seems to work for me:

.container img {
    margin-bottom: -5px;
}

However it's a hack and therefor not a really good practise in my opinion. But sometimes you just don't get around using hacks...

answered Dec 03 '13 at 10:15

RononDex

4,143
22
39

`not a really good practise in my opinion`. There you go, might be worth reading up on this :) – Nick R Dec 03 '13 at 10:17

score 0 · Answer 3 · answered May 17 '19 at 16:43

0

Not really related to this case, but for someone having issue with <pre> wrapperd in <td>, you may need to set margin: 0 to remove the space. This is the case I met with when using codeblock in hugo.

answered May 17 '19 at 16:43

mach6

316
5
4

table td leaves unwanted space at the bottom

3 Answers3