Как удалить это «а» пространство под изображениями с помощью CSS?

Question

Я пытаюсь изучить основы CSS, но у меня все еще есть некоторые проблемы.
Как я могу скрыть это «a» пространство под img?
Я дал ему красный фон, чтобы было легче объяснить, в какой части я говорю.

здесь проблема:

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

.feedEkList li a { 
background: red; 
} 

Это CSS, но я не могу скрыть это (я хочу, чтобы сохранить IMG конечно)

Answer 1

Try дисплей: блок на изображении :

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

.feedEkList li a img 
{ 
    display:block; 

} 

Answer 2

Проблема заключается в том, что ваши <a> и <img> являются встроенными элементами, поэтому на дисплее сохраняются пробелы.

Однако вы рассматриваете их как элементы уровня блока и ожидаете, что они не будут содержать таких пространств.

Самый простой (не вдаваясь в углубленной в другие вопросы), чтобы сделать оба <a> тегов и тег <img>display: block (хотя, как Саливан отметил img тега сам по себе должен быть достаточно).

Answer 3

Просто добавьте эту строку display:block;. это решит вашу проблему, поскольку IMG показано в строке по умолчанию Добавить его в CSS, как это

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

Answer 4

IMG элементы «инлайн», так же, как и текст. Это белое пространство является частью линии, которая удерживает нисходящую часть букв (например, j или g), а вертикальный выравнивание изображения задается в «базовой линии» линии, где располагается нижняя часть большинства букв (abcd).

Один из вариантов - это, как указано, блок отображения, несмотря на то, что он является стандартным «встроенным» дисплеем. Вы также можете избежать изменения «вертикального выравнивания» до «снизу».