删除引导静态导航栏底部不需要的填充答案

【问题标题】：Remove unwanted padding at bottom of bootstrap static navbar删除引导静态导航栏底部不需要的填充
【发布时间】：2015-05-25 05:24:25
【问题描述】：

我正在使用 Bootstrap，但导航栏出现问题。在我的导航栏中，我有一些 div 想要成为导航栏的全高，但导航栏似乎总是比里面的 div 高一点。我认为这是由于导航栏某处的一些填充，但我找不到它。看看这个 jsFiddle：

https://jsfiddle.net/2fax4vme/

注意三个.rhombus div。它们应该是导航栏的全高，但它们下方有 5 个像素的额外空间。如果我使菱形 div 高 5 个像素，导航栏就会伸展。

我确定这很简单，我并没有错过，但我就是看不出来。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

已测试：https://jsfiddle.net/2fax4vme/3/

.rhombus {
    height: 50px;
}
#navbar {
    line-height: 0;
}

我发现在 Bootstrap 中设置为 50px 的元素很少，所以可能也将你的元素设置为相同的高度是避免编辑这些默认值的好计划。

【讨论】：

【解决方案2】：

将.rhombus 的高度更改为height:50px; 怎么样。它对我有用。

对于 HTML5，还需要为每个 Pevara 添加 margin-bottom:-5px。

【讨论】：

jsfiddle.net/gcdwdtLu 这不起作用。导航栏变成 55px 高。
我在这里发布了一个有效的版本：grokify.github.io/examples/so_29189619.html。 .rhombus div 在不拉伸导航栏的情况下变得更高。还有其他问题吗？
您知道为什么它在您的链接中有效，但在 jsFiddle 中无效吗？代码看起来一样。我尝试在我的页面中设置height:50px，我得到了与 jsFiddle 相同的效果，导航栏只是扩展了。
jsFiddle 会自动添加 HTML5 DOCTYPE，这也需要为每个 Pevara 添加 margin-bottom:-5px;。如果 DOCTYPE 不存在，则没有必要。如果你添加 margin-bottom:-5px 你应该很高兴。
DOCTYPE 究竟会影响什么？我看到margin-bottom:-5px 确实解决了这个问题，但我不明白为什么。

【解决方案3】：

我不会尝试编辑引导导航栏 css。相反，您为什么不通过在菱形底部添加负边距来对抗填充（并在高度上添加额外的几个像素）

       .rhombus{
            height:50px; /* + 5px */
            width: 35px;
            -webkit-transform: skew(-20deg);
            -moz-transform: skew(-20deg);
            -o-transform: skew(-20deg);
            display: inline-block;
            margin:0px;
            padding:0px;
            margin-bottom: -5px; /* counter the padding */
        }

和更新的小提琴：https://jsfiddle.net/2fax4vme/2/

【讨论】：

这确实解决了我的问题，但如果您能解释一下这里实际发生的情况，我将不胜感激，谢谢！
查看此答案以了解有关负边距的解释：stackoverflow.com/questions/11495200/…
我只是不明白为什么需要在这里使用它。当内容变高时，CSS 的哪一部分导致导航栏扩展？