Why does cellpadding="0" not remove vertical padding around small images?

Question

I put two tiny images (8px) in a table with no cell padding, but there still is padding above and below the pictures. This only happens with images below a certain size. Why?

<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><IMG SRC="http://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Star.svg/8px-Star.svg.png"></td>
</tr>
<tr>
<td><IMG SRC="http://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Star.svg/8px-Star.svg.png"></td>
</tr>
</table>

have you used the element inspector in your browser to see what styles are being added to the elements? — Dan, May 15 '15 at 19:08
My answer below explains this issue more precisely than the accepted answer referenced in the _marked as duplicate_ message. — Kevin Boucher, May 15 '15 at 19:16

score 2 · Accepted Answer · answered May 15 '15 at 19:13

2

It's because the image is inline and thus renders at the current line-height.

Set line-height to 8px or set the image to block:

td {
    line-height: 8px;
}

or ..

td img {
    display: block;
}

answered May 15 '15 at 19:13

Kevin Boucher

16,426
3
48
55

Why does cellpadding="0" not remove vertical padding around small images?

1 Answers1