2

I find that if I put an image inside a table cell like this (JSFiddle):

<table style="height: 300px; border: 1px solid black">
    <tr>
        <td><img src="https://www.google.com.hk/images/srpr/logo11w.png" /></td>
    </tr>
</table>

There will be a small space below the image, making the vertical align not exact:

enter image description here enter image description here

Does any one know what is happening here?

I tried to add vertical-align: middle to the td, but it makes no difference.

Joy
  • 9,430
  • 11
  • 44
  • 95
  • Possible duplicate of [HTML 5 strange img always adds 3px margin at bottom](http://stackoverflow.com/questions/10844205/html-5-strange-img-always-adds-3px-margin-at-bottom). In particular look at [http://stackoverflow.com/a/10844318/3400962](http://stackoverflow.com/a/10844318/3400962) for the reason why this is happening and the way to fix it. – Hidden Hobbes Apr 30 '15 at 09:32

5 Answers5

3

Have you tried adding display: block to the img element? Seems to fix most problems for things within tables.

img {
  display: block;
}
<table style="height: 300px; border: 1px solid black">
  <tr>
    <td>
      <img src="https://www.google.com.hk/images/srpr/logo11w.png" />
    </td>
  </tr>
</table>

JSFiddle

Stewartside
  • 20,378
  • 12
  • 60
  • 81
1

You have to set the img as "display:block"

img {display:block}

http://jsfiddle.net/91beLce7/4/

Felix Geenen
  • 2,465
  • 1
  • 28
  • 37
1

Try this Fiddle

*{
    margin: 0;
    padding: 0;
}
table tr td img{
    display: block;
}
stanze
  • 2,456
  • 10
  • 13
0

You can fix that with line-height: .8em;

Victor
  • 995
  • 1
  • 10
  • 26
0

Try like this: Demo

* {
    margin: 0;
    padding: 0;
}
table {
    background:red;
    height: 300px;
    border: 1px solid black;
}
tr {
    background:#ccc;
}
img {
    background:green;
    display: block;
}
G.L.P
  • 7,119
  • 5
  • 25
  • 41