html - 为什么li的高度比里面图片的高度还大？

Question

将鼠标悬停在我的导航栏的顶级 li 元素上时，

I see that small space beneath the image inside the li element

当我没有为我的 li 元素定义背景颜色时，这让我很烦恼，因为我们可以看到下面的菜单子(monad)项似乎没有链接到 li 元素。

通过Chrome的调试器，我发现li和img元素的高度不一样:

this screenshot shows the height of the li element and the image inside it

我试图找到 li 元素上的任何默认填充或边距值，但找不到，所以我不知道该空间来自何处。

请注意，我已使用此 css 代码禁用了我的 UL 的间距:

nav ul {
    list-style: none;
    margin: 0;
    padding: 0px;
}

您能解释一下为什么会出现这个空格，并告诉您如何删除 [li 元素上] 不需要的空格吗？

Answer 1

这是因为图像是内联元素，要解决此问题，请将 display: block; 添加到图像中，然后使用 margin: 0 auto; 将其居中放置在 中李.