Question

我正在尝试制作带有图像的列表，但我在图片下面会看到一些奇怪的空白区域。

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

CSS： ul {margin：60px;填充：0;列表样式类型：无; } ul li {display：inline-block;余量：0;填充：0; box-shadow：0 0 15px 5px＃000; } ul li img {margin：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>

Answer 1

添加显示：块;到img。

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

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

在无序列表中img下方的奇怪空白

1 个答案: