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

Question

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

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

谢谢！

score 5 · Accepted Answer

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

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

score 4 · Accepted Answer

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

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

score 1 · Accepted Answer

只需将其设置display: block;为您的图像即可避免空间演示

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

默认情况下，任何带有显示内联或内联块的元素在它们之间都有大约 4 像素空间演示

所以图像默认是内联或内联块的，它显然会包含空间。

因此，为了避免元素的空间，您应该使用 float 代替。对于这种情况下的元素，您可以使用float: left; 查看此演示

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

score 0 · Accepted Answer

这是一个垂直空间，而不是 nbsp，因为lis 之间有空格。

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

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

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

score 0 · Accepted Answer

0

试试这个 CSS

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

于 2013-11-12T06:14:15.693 回答

score -1 · Accepted Answer

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

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

或者您可以使用CSS RESET：

6 回答 6