Extra blue space below an img

Question

I have this code:

<div class="item">
    <div class="item-title Traffic">کاردستی</div>
        <div class="item-content">
            <a href=""><img src="images/kardasti.png" width="100%" ></a>
        </div>
    </div>
</div>

and the result is:

Why is this blue area showing below the image?

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [Stack Snippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See How to create a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). — andreas, Aug 12 '16 at 16:15
Post your CSS, too. But try removing the `` tag surrounding the image and see if it's still there — Michael Hommé, Aug 12 '16 at 16:15
I had a similar whitespace issue once and I did it by putting `display: block` on the `img` tag — kukkuz, Aug 12 '16 at 16:15

Ragdoll · Answer 1 · 2016-08-12T16:23:19.930

1

It's because images are intrinsically set to display: inline, so they render similarly to text. Text has line-height that extends above and below the letters, so if there is a background-color, it fills that line-height.

Set your image to display: block in order to nullify the line-height.

edited Aug 12 '16 at 16:23

answered Aug 12 '16 at 16:15

Ragdoll

335
1
8

Extra blue space below an img

1 Answers1