css - 从嵌套的内联 block 中删除默认的上边距

Question

准备网站导航栏时，我想像 Android 那样在选项卡上创建悬停效果，即当您将鼠标悬停在选项卡上时，顶部边框会显示在选项卡上。

问题是，这些导航栏选项卡嵌套在一个容器 div 中，并且出于某种原因，导航栏选项卡有一点边距，即使我没有明确指定一个。所以，我想要的顶部边框并没有完全对齐到窗口的顶部。

我尝试了常用的解决方法:在父级中设置 font-size:0，使用 vertical-align:top 和 margin-top:-4px，但这些似乎都不是完美的。

这是 jsfiddle:http://jsfiddle.net/A3nEq/

请注意绝对顶部和白色顶部边框之间的一条细黑线。我必须摆脱它!

Answer 1

您必须从您的#headContainer div 中删除border: 2px solid transparent;。

演示: http://jsfiddle.net/A3nEq/1/