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

【问题标题】：html <ul> adding unwanted space underneath every <li>html <ul> 在每个 <li> 下添加不需要的空间
【发布时间】：2011-10-02 14:36:10
【问题描述】：

在<ul> 中创建<li> 时，我得到了一个不需要的视觉怪癖。它在每个项目下方产生了一个不需要的空间。

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

<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/

编辑：为每个<li>添加了margin:0和padding:0

编辑：添加图像和 jsfiddle

【问题讨论】：

标签： html css

【解决方案1】：

您已声明仅在ul 上不希望padding 和margin。

您需要为lis 这样做。

要么这样做

<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

按照更新的小提琴，问题不是在lis之间，而是在li的文本和底部之间。

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

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

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

【讨论】：

我已经尝试过了。它不起作用。它在您的浏览器中运行吗？
当然可以，@EverTheLearner。有关示例，请参见上面的编辑。
这不起作用。请注意每个文本项下方的额外空间。很难看到，但它就在那里。我看到它的唯一原因是因为我在 li 中使用了图像，但为了简化此处的代码，我将其取出，但它仍然存在。
我也看不出与jsfiddle.net/aApVa 有任何区别 :) @EverTheLearner：你真的应该从一开始就更清楚这个问题。 SSCCE 和最终的屏幕将有助于了解您所谈论的空间。
你看的不够近

【解决方案2】：

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

CSS

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

由于您的示例包含图像，因此您的问题可能就在其中。如果我理解正确的话，文本的下降器甚至会导致空的内联元素具有高度。在您的图像上尝试vertical-align: baseline 或bottom；无论如何，我以前也曾用这种方式解决过类似的问题。

编辑：我的错，你的第二个箭头指向一个没有图像的li；不过我会把它留在这里，以防它为您指明正确的方向，

【讨论】：

我遇到了这个确切的场景，一个 li 内的图像。无法弄清楚是什么在底部产生了额外的空间。非常有帮助，谢谢。

【解决方案5】：

如果没有在其他所有内容的上下文中查看代码，很难说。但是尝试设置line-height: 1em;。可能是 line-height 设置得更多，造成空间。

【讨论】：

【解决方案6】：

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

并且填充不允许负值，因此您实际上不能使框更小（垂直）。除了您可以调整行高。但是，您可以通过将边距属性设为负值来将框移得更近。

我使用了ul li {margin-top:-2px; margin-bottom:-2px}，您可以继续将它们靠得更近，但如果您将它们靠得更近，就会看起来很奇怪，因为框重叠了。

我将 line-height 设置为 1 以最小化行之间的空间，然后我将框移得更近。我的例子是尽可能靠近盒子。

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

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

【讨论】：