从嵌套的内联块中删除默认的上边距

Posted 2023-04-14

【中文标题】从嵌套的内联块中删除默认的上边距

【英文标题】：Remove default top margins from nested inline-blocks

【发布时间】：2014-06-19 16:13:43

【问题描述】：

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

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

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

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

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

【参考方案1】：

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

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

【讨论】：

哦！没想到会导致这个问题！！非常感谢！

【参考方案2】：

从#headContainer 中移除边框。