a wrapped image adding space

Question

Just like on this example: http://jsfiddle.net/sbefc58t/2/

When I have images wrapped in a link it adds space below the image. How do I get rid of this?

<div class="top">
    <a href="/">
        <img src="http://static.giantbomb.com/uploads/screen_medium/11/118253/2220255-wolf3d_dos.png" />
    </a>
</div>

.

*{padding:0;margin:0;}
.top{ background: grey; border-radius: 3px; margin: 5px 0; overflow: hidden; }
a{line-hight:0;}

JSFiddle - http://jsfiddle.net/sbefc58t/1/ – Anonymous Sep 11 '14 at 21:07 — Anonymous, Sep 11 '14 at 21:07

score 4 · Accepted Answer · answered Sep 11 '14 at 21:09

4

JSFiddle - DEMO

Use vertical-align: middle; to img

img {
    vertical-align: middle;
}

answered Sep 11 '14 at 21:09

Anonymous

10,002
3
23
39

Alex Char · Answer 2 · 2014-09-11T21:19:00.730

1

Just add display: block in img:

img{display: block;}

fiddle

edited Sep 11 '14 at 21:19

answered Sep 11 '14 at 21:10

Alex Char

32,879
9
49
70

Do you know what `inherit` really does? – Hashem Qolami Sep 11 '14 at 21:15
Do be honest `display: block` is enough http://jsfiddle.net/sbefc58t/8/ – Alex Char Sep 11 '14 at 21:17
Therefore I'm not sure if the link should fill the entire space of the parent (as a block level element) – Hashem Qolami Sep 11 '14 at 21:18
hmm you are right but OP didn't specify it. Thx for feedback @HashemQolami ;) Mary Melody answer is better. – Alex Char Sep 11 '14 at 21:21

a wrapped image adding space

2 Answers2