图片列表下面的空间HTML/CSS

Question

当一个元素被选中时，我的列表下面有一个空白(目前是一条黑线)(列表中的所有元素都是图像)。我发现一些线程建议vertical-align:middle和display:inline-block，但两者都不起作用，或者我把它放在了错误的地方。这里是我的代码和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标签的末尾，这是不必要的。