6/11/24, 6:40 PM html - table td leaves unwanted space at the bottom - Stack Overflow

2024 Developer survey is here and we would like to hear from you! Take the 2024 Developer Survey

table td leaves unwanted space at the bottom

Asked 10 years, 6 months ago Modified 5 years ago Viewed 8k times

I have the following html

2 <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

html css html-table

Share Improve this question Follow asked Dec 3, 2013 at 10:06

BeNdErR
17.8k 21 75 105

possible duplicate of Remove spacing between table cells and rows – Pbk1303 Dec 3, 2013 at 10:13

3 Answers Sorted by: Highest score (default)

https://stackoverflow.com/questions/20348085/table-td-leaves-unwanted-space-at-the-bottom?rq=3 1/3
6/11/24, 6:40 PM html - table td leaves unwanted space at the bottom - Stack Overflow

Add the following CSS

.container img { display:block; }

19
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

Share Improve this answer Follow edited Dec 3, 2013 at 10:16 answered Dec 3, 2013 at 10:10
Nick R
7,754 2 23 32

1 That's the original JSFiddle. I think you need to click Update. – ADTC Dec 3, 2013 at 10:15

Not sure why this occours here. I have tried several things. The following CSS seems to work for
me:
0
.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...

Share Improve this answer Follow answered Dec 3, 2013 at 10:15

RononDex
4,173 24 40

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

https://stackoverflow.com/questions/20348085/table-td-leaves-unwanted-space-at-the-bottom?rq=3 2/3
6/11/24, 6:40 PM html - table td leaves unwanted space at the bottom - Stack Overflow

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
0 codeblock in hugo.

Share Improve this answer Follow answered May 17, 2019 at 16:43
mach6
370 6 6

https://stackoverflow.com/questions/20348085/table-td-leaves-unwanted-space-at-the-bottom?rq=3 3/3