Удалить верхние поля по умолчанию из вложенных встроенных блоков

#css #margin #default

#css #поля #По умолчанию

Вопрос:

Готовя панель навигации веб-сайта, я подумал о создании эффектов наведения курсора мыши на вкладку, как это делает Android, то есть верхняя граница отображается над вкладкой при наведении курсора мыши на вкладку.

Проблема в том, что эти вкладки панели навигации вложены в div контейнера, и по какой-то причине вкладки панели навигации имеют небольшое поле, хотя я не указал его явно. Итак, верхняя граница, которую я хочу, не идеально выровнена по верхней части окна.

Я попробовал обычные обходные пути: настройка font-size:0 в родительском, использование vertical-align:top и margin-top:-4px , но ни одно из них, похоже, не работает идеально.

Вот jsfiddle: http://jsfiddle.net/A3nEq /

Обратите внимание на тонкую черную линию между абсолютной верхней и белой верхней границей. Я должен избавиться от этого!

Ответ №1:

Вы должны удалить border: 2px solid transparent; из своего div #headContainer.

Демонстрация: http://jsfiddle.net/A3nEq/1 /

Комментарии:

1. О! Не думал, что это вызывает эту проблему!! Огромное спасибо!

Ответ №2:

Удалите границу из #headContainer.