Css问题 - 李正在获得未知的保证金？

Question

我正在开发一个HTML CSS模板，我遇到的情况是我的列表项（li）从某处获得了底部边距，这是我的代码：

JSFIDDLE

HTML

<div id="main-4">
    <ul>
        <li>
            <img src="http://demo.htmlcoder.me/ivega/images/portfolio-1.jpg" alt="#">
        </li>
        <li>
            <img src="http://demo.htmlcoder.me/ivega/images/portfolio-2.jpg" alt="#">
        </li>
        <li>
            <img src="http://demo.htmlcoder.me/ivega/images/portfolio-3.jpg" alt="#">
        </li>
        <li>
            <img src="http://demo.htmlcoder.me/ivega/images/portfolio-4.jpg" alt="#">
        </li>
    </ul>
</div>

CSS

#main-4 ul li {
    list-style-type: none;
    float: left;
    width: 337px;
}

    #main-4 ul li > img {
        width: 337px;
    }

Answer 1

这是因为图像可以做到这一点。提供您的图片vertical-align:bottom，看看它是如何修复的：

#main-4 ul li {
    list-style-type: none;
    float: left;
    width: 337px;
}

    #main-4 ul li > img {
        width: 337px;
        vertical-align:bottom;
    }