How can I delete this "a" space under the images using CSS?

Question

I'm trying to learn the basics in CSS but I still have some problems.
How can I hide this "a" space under the img?
I gave it a red background to make it easier to explain which part I'm talking about.

here is the problem:

http://jsfiddle.net/3c48P/7/

.feedEkList li a {
background: red;
}

This is the CSS but I cannot hide it (I want to keep the img of course)

Answer 1

Try display:block on image:

http://jsfiddle.net/3c48P/9/

.feedEkList li a img
{
    display:block;

}

Answer 2

The issue is that your <a> and <img> are both inline elements so spaces are preserved during display.

However, you are treating them as block level elements and expect them to contain no such spaces.

The simplest (without going in-depth into other issues) is to make both the <a> tags and <img> tags display: block (although as salivan pointed out the img tag alone should be sufficient).

Answer 3

Just add this line display:block;. it will solve your problem because the img is shown in line by default Add it in the css like this

 img {
    width:100%;
    height: auto;
    display: block; 
    }

Answer 4

img elements are "inline", just like text. This white space is the part of the line that holds the descending part of letters (for example j or g) and the vertical align of the image is set at the "baseline" of the line, where the bottom of most letters rest (abcd).

One option is, as pointed, display block in spite of it's default "inline" display. You can also avoid it changing the "vertical-align" to "bottom".