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

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/

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

编辑:添加图像和 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 的评论

I don't know how else to describe it. There is a space there. Its very tiny but its there. Look at the space above the text and then the space below the text. There is a difference there.

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

那里肯定还有别的东西。请发布指向实例的链接。

编辑 2

在更新 fiddle 之后，问题是不在li之间s 但在文本和 li 的底部之间.

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

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

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