Почему вычисленная высота этого div больше его содержания?

Question

Я новичок в CSS, работающий над сайтом WordPress, использующий плагин Menubar для навигации. Я смог внести изменения в свой CSS для цветовой схемы, центрирования и шрифтов, но я не могу понять, почему div, который окружает <ul> для меню есть лишние 6 пикселей внизу. Я пытался установить поле на 0 в нескольких местах, меняя line-height... но ничего не работает.

Вы можете посмотреть сайт здесь. Тема, которую я использую, - это ребенок Двадцать одиннадцати. Вот (я думаю) 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;
}