HTML - 为什么LI标签之间有一些额外的空间？

Question

我想使用<li>标记制作图像列表，但我发现每个<li>标记之间有一些额外的空格。

只需看http://jsfiddle.net/scarletsky/VKCs5/

即可

我只是想知道为什么<li>标记之间有额外的空格，以及如何修复它。

THX！

Answer 1

因为您的图像是内嵌显示的，即。在与文本相同的行上，您会在下方获得白色间隙，以便为文本中的下行空间留出空间。考虑一下你是否在同一行上有y或g - 它需要下面的空间。

您可以通过制作图片display: block;或vertical-align: bottom;

来解决此问题

Answer 2

不是导致此问题的li s而是图像。默认情况下，图片是带有vertical-align: baseline的内联元素，因此您必须将它们设置为vertical-align: bottom或diaplay_block才能解决此问题：

li img {
    border: none;
    vertical-align: bottom;
}

http://jsfiddle.net/VKCs5/3/

Answer 3

只需将display: block;设置为您的图片即可避免空格demo

---

默认情况下，图像最初是内联块或内联块，因此您需要通过将其指定为块来考虑它。

---

显示内联或内联块的任何元素默认情况下都有大约4个像素空间demo

因此默认情况下图像是内联或内联块，显然会包含空格。

---

因此，为了避免元素的空间，你应该使用float。对于此案例中的元素，您也可以使用float: left; see this demo

因此，主要原因是内联或内联块显示导致空间。

Answer 4

这是一个垂直空间，而不是由于li之间的空格。

您可以通过更改图像的垂直对齐来修复它，我已将其设置为底部而不是默认的基线。

li img {
    border: none;
    vertical-align: bottom;
}

我更新了你的jsFiddle：http://jsfiddle.net/VKCs5/1/

Answer 5

尝试使用此CSS

li img {
    border: medium none;
    vertical-align: text-top;
}

Answer 6

ul li默认情况下会删除一些空格来添加代码：

ul,li{
padding:0;
margin:0
}

或者您可以使用CSS RESET：