悬停导航栏的顶级li元素
I see that small space beneath the image inside the li element
当我没有为li元素定义背景颜色时，这会让我感到困惑，因为我们可以看到下面的菜单子项似乎没有链接到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元素]上不需要的空间？
答案 0 :(得分：1)
因为图片是内嵌元素，为了解决此问题，我需要display: block;将margin: 0 auto;添加到li。
答案 1 :(得分：0)
经过研究，我发现这个空间实际上是在每个内联块元素之后添加的空格，它们之间有间距字符（例如回车，TAB，空格）。
通过删除HTML中的这些间距字符，我能够删除不需要的空间。
StackOverflow上的这篇文章是了解问题并了解修复它的不同技术的一个很好的起点： Unwanted margin in inline-block list items [duplicate]