html<；ul>；在每个<；李>；

在

中创建

时，我遇到了一个不必要的视觉怪癖。它会在每个项目下产生一个不需要的空间。

这是我目前使用的简化代码

<ul style="margin:0; padding:0;">
  <li style="border:1px solid #000; margin:0; padding:0;">Item 1</li>
  <li style="border:1px solid #000; margin:0; padding:0;">Item 2</li>
  <li style="border:1px solid #000; margin:0; padding:0;">Item 3</li>
  <li style="border:1px solid #000; margin:0; padding:0;">Item 4</li>
  <li style="border:1px solid #000; margin:0; padding:0;">Item 5</li>
</ul>


第1项
第2项
第3项
第4项
第5项


如果您注意到，每个
的文本下面都有一个空格，尽管我已经声明希望我的边距和填充为0

谷歌Chrome v14和Firefox v4都出现了这种情况

以下是屏幕显示：


我更新了JSFIDLE以包含以下图像：

编辑：在每个

编辑：添加图像和jsfiddle
您已经声明您只希望
ul
上没有
填充
和
边距

您需要对
li
s执行此操作

要么这样做

第1项

或者将这些样式添加到样式表中（最好只需执行一次，这样可以减少HTML的混乱）

示例：

编辑

根据@EverTheLearner的评论

我不知道该怎么形容它。有一个空间 那里它很小，但它在那里。看看这个空间 在文本上方，然后是文本下方的空格。有一个 差别就在这里

以下是我将浏览器上的缩放比例增加到250%时看到的内容

那里一定有别的东西。请发布一个链接到一个实例

编辑2

更新小提琴后，问题不是在

li

s之间，而是在

li

的文本和底部之间

消除这种情况的一种方法是更改

行高度

在下面的示例中，我将其设置为
.8em

示例2:
无序列表的边距和填充为0并不意味着其中每个列表项的边距和填充为0

如果希望列表项具有特定的边距和/或填充，则必须在列表项上设置边距和/或填充。
如果不在其他所有内容的上下文中查看代码，很难说。但尝试设置
行高：1em。可能是因为行高设置得太高，导致出现空格。
如Jason Gennaro所述，“空格”的问题在于文本的默认
行高属性。您可以这样更改该属性：

CSS

li {
    line-height: .8em; /* 1em = standard line height */
}

因为您的示例包含一个图像，所以这可能就是您的问题所在。如果我理解正确的话，文本上的子元素甚至会导致空的内联元素具有高度。尝试在图像上垂直对齐：基线
或底部
；无论如何，我以前也曾以这种方式解决过类似的问题

编辑：我的错，你的第二个箭头指向一个没有图像的
li
；尽管如此，我还是把它留在这里，以防它指向正确的方向，
所有HTML元素都会在一行和下一行之间自动添加少量的填充（这样一来，一行不会一直接触下一行，这看起来很糟糕）

而且填充不允许为负值，因此实际上不能使框变小（垂直）。除了可以调整线条高度之外。但是，可以通过为“边距”属性指定负值来将框移近

我使用了
ulli{margin top:-2px；margin bottom:-2px}
您可以继续将它们移近，但如果您将它们移近，看起来会很奇怪，因为框重叠

我将行高度设置为1以最小化行之间的空间，然后将框移动得更近。我的例子是尽可能接近你能得到的盒子

例如：

另外，为每个
li
键入相同的内联样式是浪费时间的。您应该像我在示例中所做的那样，将样式键入样式表中。
我已经尝试过了。它不起作用。“它在你的浏览器中工作吗？当然工作了，”EverTheLearner说。有关示例，请参见上面的编辑。这不起作用。请注意每个文本项下面的额外空间。很难看到，但它就在那里。我看到它的唯一原因是因为我在li中使用了一个图像，但为了简化这里的代码，所以我把它拿了出来，但它仍然存在。我看不出这两者之间有什么区别：）@EverTheLearner:从一开始，你真的应该对这个问题更加清楚一点。SSCE和最终的屏幕将有助于了解你所谈论的空间。你看不到近距离。我遇到了这个确切的场景，一个li内的图像。无法找出到底是什么在底部产生了额外的空间。非常有帮助，谢谢。
li {
    line-height: .8em; /* 1em = standard line height */
}