为什么这个div的计算高度超过其内容？

Question

我是使用Menubar plugin进行导航的WordPress网站上的CSS新手。我已经能够改变我的CSS用于配色方案，居中和字体的东西，但我不能为我的生活弄清楚为什么围绕菜单<ul>的div有额外的6像素在底部。我已经尝试在几个地方将边距设置为0，更改line-height ...但没有任何效果。

您可以查看网站here。我正在使用的主题是Twenty Eleven的孩子。这是（我认为）重要的CSS：

#access div {
    margin: 0 0 0 0;
}
#access {
    background: #773736; 
    clear: both;
    display: block;
    margin: 0 auto; 
    width: 100%;
    text-align: center;
}
#access ul {
    font-size: 13px;
    list-style: none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;
    display: inline-block;
    font-weight: normal;
}
#access li {
    float: left;
    position: relative;
    text-align: left;
}
#access a {
    color: #eee;
    display: inline-block;
    line-height: 3.333em;
    padding: 0 1.2125em;
    text-decoration: none;
    font-weight: normal;
}

我需要做些什么来摆脱这个额外的高度？

Answer 1

原来这是一个line-height问题：

#access {
background: #773736;
clear: both;
display: block;
margin: 0 auto;
width: 100%;
text-align: center;
line-height: 12px;/*this fixes it*/
}

还应该指出它是从1.625的身体继承线高（这里应该是单位）

Answer 2

在黑暗中刺伤......

#access a {
   color: #eee;
   display: inline-block;
   line-height: 3.333em; <-- this might be causing it
   padding: 0 1.2125em;
   text-decoration: none;
   font-weight: normal;
}