css - 为什么这个 div 的计算高度大于它的内容？

Question

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

您可以查看网站here .我使用的主题是 21 岁的 child 。这是(我认为)重要的 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 的主体继承了行高(这里应该是单位)