Remove the gap between the image and the Container

Question

enter image description here

You can the image, and this the demo http://jsfiddle.net/yJUH4/8/

As you can see in the picture a small gap is coming between image and the Container. Image is already give css vertical-align:middle. When i increase the height of the container it works perfectly. Waiting for a good answer

score 7 · Accepted Answer · answered Oct 22 '13 at 19:58

7

Set vertical-align:top on the img

img {
    vertical-align: top;
}

jsFiddle here

By default, the vertical-align property isn't top, but rather baseline. By simply setting it to top, you can achieve the desired result.

answered Oct 22 '13 at 19:58

Josh Crozier

219,308
53
366
287

1

Or 'bottom'. The key is to set it to something other than 'baseline', which allows for character descenders and is dependent on line-height. – isherwood Oct 22 '13 at 20:04
@isherwood Exactly. `middle`, `top`, and `bottom` all work. – Josh Crozier Oct 22 '13 at 20:07

isherwood · Answer 2 · 2013-10-22T20:05:28.550

1

One other option...

td {
    display: inline-block;
    padding: 0;
}

http://jsfiddle.net/isherwood/yJUH4/11/

edited Oct 22 '13 at 20:05

answered Oct 22 '13 at 19:57

isherwood

52,576
15
105
143

score 1 · Answer 3 · answered Oct 22 '13 at 19:57

1

img {
    display:block;
    margin:0 auto;
}

should fix it.

answered Oct 22 '13 at 19:57

Paulie_D

102,164
10
117
144

Remove the gap between the image and the Container

3 Answers3