Убрать зазор и отцентровать по-вертикали навигацию

[aaron]

Подскажите, пожалуйста.

Есть такой код - http://jsfiddle.net/...tPCz8CJv/WuxvJ/

Он создан для чистого эксперимента.

Но на последней стадии возник вопрос. Между ul и #head есть очень небольшой зазор по вертикали.

Как мне его убрать и выровнять, чтобы li a был по центру (20px)?

Пробовал line-height для a и li - не помогает, почему-то. Padding и margin - вообще не то.

Подскажите, что не так?

Ошибся - точнее, между ul и li зазор есть по вертикали.

Edited April 12, 2013 by aaron

[mrnobody]

#nav li {
  display: inline-block;
}

Edited April 12, 2013 by mrnobody

[aaron]

#nav li {
display: inline-block;
}

да. но li a - зазор остался. line-height опять не работает. Ставлю #nav a{line-height: 20px};

Ссылка a - ведь осталась строчным элементом? На нее ведь должен действовать line-height?

Хочу вытянуть ее на вертикальное выравнивание в ul.

Edited April 12, 2013 by aaron

[deadrash]

Я вообще понять не могу, какой зазор?

[spdif]

поподробней про зазоры... я три раза смотрел! не увидел какие, где(

[aaron]

Вот здесь - http://itmages.ru/image/view/983168/d41d8cd9

[Kray Storm]

<ul> дать font-size:0;, и потом "вернуть" нужный размер <li>

UPD: А, тут не тот случай. Извиняюсь - тупанул.

Edited April 13, 2013 by Kray Storm

[aaron]

<ul> дать font-size:0;, и потом "вернуть" нужный размер <li>

UPD: А, тут не тот случай. Извиняюсь - тупанул.

ага - а то я пробую, а у меня оно как-то все боком выходит. вроде и то, да не совсем то получается.

а что это за хак такой - font-size:0; где почитать можно о нем?

Edited April 13, 2013 by aaron

[Kray Storm]

Практика:

Тот зазор в 1px сверху - это реакция float-элемента на вложенные inline. Делаем их inline-block и зазор пропадает.

http://jsfiddle.net/WuxvJ/1/

Теория:

Это все круто, но кто обьяснит - почему так происходит? ))

[aaron]

Спасибо за наводку по inline-block.

Но зазоры там все-же присутствуют, однако... (

Немного поработал и получилось вот так - http://jsfiddle.net/...tPCz8CJv/uP2br/

Все работает и отступов нет никаких. Стала более понятна природа inline-block.

Доволен! )

Спасибо Kray Storm.

Edited April 15, 2013 by aaron