Пробел под списком изображений HTML/CSS

Question

Я получаю пустое место (которое сейчас является черной линией) под моим списком, когда элемент выбран (все элементы в списке - это изображения). Я нашел несколько потоков, предполагающих вертикальное выравнивание: средний и дисплей: встроенный блок, но ни работать, или я помещаю его в том месте, вот мой код и JSFiddle: http://jsfiddle.net/6geo6qkv/

HTML

<div id="Gfilter"> 
    <ul id="grade" class="option-set sort"> 
     <li> 
      <a href="#" data-filter="*" class="selected"><img src="images/Filtre2.png" width="150"/></a> 
     </li> 
     <li> 
      <a href="#" data-filter=".1"><img src="images/Filtre2.png" width="150"/></a> 
     </li> 
    </ul> 
</div> 

CSS

#Gfilter { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 0; 
    vertical-align: middle; 
} 

.sort { 
    width: 100%; 
    font-size:55px; 
} 

.sort li { 
    display:inline-block; 
} 

.sort ul { 
    text-align:center; 
} 

.selected { 
    background:black; 
    vertical-align:middle; 
} 

Answer 1

Добавьте это в CSS

#grade a{ 
    display:block; 
    line-height: 0; 
} 

Также исправьте свой HTML-код, у вас есть /img> в конце каждого тега img, который не нужен.