html - 为什么这些图像之间有空格？

我有一个非常简单的布局，你可以看到它here

<html>
<head>
    <style>
        html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td {
            margin: 0;
            padding: 0;
        }

        ul.mm_sortable_items {
            list-style: none;
        }

        ul.mm_sortable_items li {
                display:inline-block;
                margin: 0;
        }

        ul.mm_sortable_items a {
                display: block;
                width: 100%;
        }
    </style>
</head>
<body>
    <div class="mm_quicksand_container">            
        <ul class="mm_sortable_items">
            <li class="game_filter_1" id="game_8"><a href="#"><img src="images/itg_0.png"/></a></li>
            <li class="game_filter_1" id="game_9"><a href="#"><img src="images/piu.png"/></a></li>
            <li class="game_filter_2" id="game_10"><a href="#"><img src="images/default.png"/></a></li>
            <li class="game_filter_2 game_filter_3" id="game_11"><a href="#"><img src="images/cam-teng.png"/></a></li>
        </ul>
    </div>
</body>
</html>

我希望图片彼此相邻，中间没有空格。据我所知，我目前拥有的应该这样做，但图片之间存在这些差距。

我如何摆脱它们？

最佳答案

您确实在它们之间放置了空格。如果您删除空格，图像将放在一起。

display:inline-block 将元素显示为内联。换句话说，图像之间的换行符被读取为空白。

您可以使用以下方法解决此问题:

float:left; 而不是 display:inline; 在你的 CSS 中

正如其他人所建议的那样，有负边距等解决方法，但这是执行您所要求的通常方法。

关于html - 为什么这些图像之间有空格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17884166/