我有一组简单的HTML来创建图像列表（JSFiddle）：
<ul>
<li>
<img src="//cloudinary-a.akamaihd.net/forwardfour/image/upload/h_300,w_200,c_pad,e_vibrance:100/pgznasls8cnqg3vlla7t.jpg" />
<div class="container">
<h3 class="title">The Landscape of History</h3>
</div>
</li>
</ul>
但是，如果你查看JSFiddle的附加链接，你会发现图像下面有大约5px的额外空间。你知道它为什么这样做以及我可以做些什么来消除这个额外的空间？
感谢您的时间。
答案 0 :(得分：1)
空间是图像的一部分;解决这个问题的唯一方法是裁剪它。
（嗯，你可以使用clip: rect()。但这不是一个很好的方法。）
答案 1 :(得分：0)
您的图像沿其底部边缘有5px（ish）的空白区域。将<body>背景更改为黑色，您就会看到它。
您必须裁剪来源，或将图像用作具有明确高度且无溢出的背景图像。
或者，您可以在其他三个边缘周围放置5px边框，并将其转换为设计的一部分。 ：）
问题当然是其他源图像（如果这是目录类型的东西）可能没有5px边框，所以最好的解决方案是编辑源代码，如果可以的话。