創建一個垂直的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/沒有間距，因為沒有繼承的行高。