创建一个垂直的HTML / CSS菜单，我想删除 <li> 顶部填充（在FF和IE中都显示）

Question

我正在使用HTML和CSS为库OPAC创建导航菜单。 在每个li项目中似乎存在不需要的顶部填充，这导致菜单中的项目之间存在持久的间隙。 这在最新的Firefox和IE 9中都可见。

我的HTML是：

<div class="menu_div">
<ul>
<li id="mainnav">Find Information</li>
<li><a href="#">Catalogue</a></li>
<li><a href="#">Databases</a></li>
<li><a href="#">Guides</a></li?
</ul>
</div>

我的CSS读取：

.menu_div ul
{
padding:0px;
margin:0px;
padding-top: 0px;
margin-top: 0px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#FFF;
list-style:none;
text-indent:10px;
color:#000000;
}

.menu_div ul li
{
padding:0px;
margin:0px;
padding-top: 0px;
margin-top: 0px;
list-style:none;
background:#CCC;
line-height:20px;
border-bottom:1px solid #333;
color:#000000;
}

.menu_div ul li a
{
padding:0px;
margin:0px;
padding-top: 0px;
margin-top: 0px;
text-decoration:none;
color:#FFF;
display:block;
color:#000000;
}

.menu_div ul li a:hover
{
background: #293895;
color:#FFFFFF;
}

.menu_div ul li#mainnav
{
background:#293895;
font-weight:bold;
color:#FFFFFF;
}

屏幕截图显示了我在谈论的两个项目之间的“差距”（光标悬停在第二个项目上）：

http://postimage.org/image/5dxn7j56z/

任何帮助将不胜感激。

Answer 1

这很可能是由设置的行高引起的，这通常是从列表中的代码中继承的。 尝试追加line-height: 1em; 到每个元素的CSS，以删除额外的间距。

编辑：如果您查看位于此处的JSfiddle： http ： //jsfiddle.net/pCAfk/没有间距，因为没有继承的行高。