html <ul>在每个<li> </li> </ul>下添加不需要的空间

Question

我在<li>内创建<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>

如果您注意到，每个<li>的文本下方都有一个空格，即使我已声明我希望我的边距和填充为0。

Google Chrome v14和Firefox v4都会发生这种情况。

这是截屏：

我更新了jsfiddle以包含图片：http://jsfiddle.net/Ab5e9/4/

编辑：添加边距：0和填充：0到每个<li>

编辑：添加图片和jsfiddle

Answer 1

您已声明仅在padding上不需要margin和ul。

您需要为li转到。

执行此操作

要么这样做

<li style="border:1px solid #000; margin:0; padding:0;">Item 1</li>

或将这些样式添加到样式表中（更好的是，您只需要执行一次并且它会使您的HTML不那么混乱）

ul{
    margin:0; 
    padding:0;
}

li{
    border:1px solid #000;
    margin:0;
    padding:0;
}

示例： http://jsfiddle.net/jasongennaro/Ab5e9/

修改

根据@EverTheLearner的评论

  

我不知道如何描述它。有一个空间    那里。它非常小，但它在那里。看看空间   文本上方，然后是文本下方的空格。有一个   不一样。

这是我在浏览器上将缩放比例增加到250％时看到的内容

那里肯定还有别的东西。请发布一个实时示例的链接。

编辑2

在更新后的小提琴后，li之间的问题不，但li的文字和底部之间存在问题。

摆脱这种情况的一种方法是更改​​line-height。

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

示例2： http://jsfiddle.net/jasongennaro/Ab5e9/1/

Answer 2

如上面Jason Gennaro所述，“空间”的问题在于文本的默认line-height属性。您可以像这样更改该属性：

<强> CSS

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

Answer 3

无序列表中的边距和填充0并不意味着内部每个列表项的边距和填充为0。

如果您希望列表项具有特定的边距和/或填充，则必须在列表项上进行设置。

Answer 4

由于您的示例包含图片，因此可能是您的问题所在。如果我理解正确的话，文本上的下降可能会导致空内联元素具有高度。在图片上尝试vertical-align: baseline或bottom;无论如何，我以这种方式解决了类似的问题。

编辑：我的不好，你的第二个箭头指向无图像li;尽管如此，我会把它留在这里，以防它指向正确的方向，

Answer 5

在没有看到其他所有内容的代码中，很难说。但请尝试设置line-height: 1em;。可能是行高设置为更多，导致空间。

Answer 6

所有HTML元素会自动在一行和下一行之间添加少量填充（这样一行就不会一直触及下一行，这看起来很糟糕）。

并且填充不允许为负值，因此您实际上无法使这些框更小（垂直）。除了你可以调整行高。但是，您可以通过为margin属性赋予负值来将框移动得更近。

我使用ul li {margin-top:-2px; margin-bottom:-2px}你可以继续将它们靠近在一起但是如果你把它们移得更近一些它看起来很奇怪，因为盒子重叠。

我将line-height设置为1以最小化线条之间的空间，然后我将盒子移近一起。我的例子就像你拿到盒子一样紧密。

示例：http://jsfiddle.net/MarkKramer/Ab5e9/12/

另外，浪费时间为每个li键入相同的内联样式，您应该将样式键入样式表，就像我在示例中所做的那样。