0

这是两个屏幕截图，显示了我面临的问题：

截图1 截图2

可以看到图片的高度是202px，而li的高度是208px

li 从哪里获得额外的 4 个像素的高度，我该如何解决？

4

3 回答 3

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>

毕竟不那么可读...... ;-)

于 2013-07-31T11:14:45.610 回答
0

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

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

于 2013-07-31T11:14:07.717 回答
0

为图像设置display: block;。

于 2013-07-31T11:16:28.077 回答