为什么这些<li>有额外的高度？</li>

Question

以下两个屏幕截图显示了我面临的问题：

screenshot 1 screenshot 2

您可以看到图片的高度为202px，但li的高度为208px

li从哪里获得额外4个像素的高度以及如何修复它？

Answer 1

我认为您li设置了display: inline-block，并且源代码中有换行符。

尝试：

<li><img... /></li><li><img... /></li>

而不是

<li>
    <img... />
</li>
<li>
    <img... />
</li>

或者为了便于阅读

    <li><!-- HTML COMMENT : no line break
     --><img... /><!--
 --></li>
    <li><!--
     --><img... /><!--
 --></li>

毕竟不太可读......; - ）

Answer 2

您的元素必须在<li>设置的margin-top，margin-bottom和padding为0（或负大小）上保留一些边距或填充。它也可能是由于html标签中的空格（见帖子上的评论）

使用小提琴或示例，它更容易帮助您。

Answer 3

为图片设置display: block;。