无序列表中img下方的奇怪空格[重复]答案

【问题标题】：Weird whitespace below img inside unordered list [duplicate]无序列表中img下方的奇怪空格[重复]
【发布时间】：2015-02-25 05:36:27
【问题描述】：

我正在尝试用图片制作一个列表，但图片下方出现了一些奇怪的空白。

这是一个 jsFiddle： http://jsfiddle.net/ssxgg32j/1/

CSS： ul { 边距：60px;填充：0；列表样式类型：无； } ul li { display:inline-block;边距：0；填充：0；盒子阴影：0 0 15px 5px #000; } ul li img { 边距：0;填充：0； }

HTML：

<ul>
    <li>
        <img src="http://placehold.it/400x225&text=%7B+img+%7D" alt="img 1" />
    </li>
    <li>
        <img src="http://placehold.it/400x225&text=%7B+img+%7D" alt="img 1" />
    </li>
    <li>
        <img src="http://placehold.it/400x225&text=%7B+img+%7D" alt="img 1" />
    </li>
    <li>
        <img src="http://placehold.it/400x225&text=%7B+img+%7D" alt="img 1" />
    </li>
</ul>

【问题讨论】：

标签： html css image list

【解决方案1】：

添加显示：块；到img。

ul li img { margin:0; padding:0; display: block; }

http://jsfiddle.net/ssxgg32j/2/

【讨论】：