如何消除标题和导航栏之间的间隙？答案

【问题标题】：How to remove gap between header and navbar?如何消除标题和导航栏之间的间隙？
【发布时间】：2018-06-14 13:50:00
【问题描述】：

标题图片和导航栏之间有一个奇怪的间隙，我不知道如何删除它！

<!-- some css settings -->
#banner {
    width: 100%;
    height: 100px;
    margin-bottom: 0;
    margin-top: 0;
}

#nav_bar {
    background-color: #202020;
    margin-bottom: 0;
    margin-top: 0;
    z-index: 100;
}

【问题讨论】：

很可能只是body 标记上需要规范化或重置的默认margin 供应商样式，例如：body { margin: auto;}
Why does my image have space underneath? 可能重复您可以尝试将display: block 应用到#banner 吗？

标签： jquery html css sass

【解决方案1】：

就我个人而言，我只是在导航栏上设置一个负边距，然后你就可以开始了：

#nav_bar {
    background-color: #202020;
    margin-bottom: 0;
    z-index: 999;
    margin-top: -4px;
}

https://codepen.io/anon/pen/VyMmRP

【讨论】：

它有效。非常奇怪的内容行为必须使用负边距......
@CalvinNunes 同意，但这是 IMO 野兽的本性。在这种情况下，您实际上可能会花费数小时来试图弄清楚什么时候您真正需要做的就是“修复”它是把那个负边距扔在那里。不幸的是，CSS 不允许你像 JavaScript 或其他语言那样“调试”，所以我发现有时有必要像这样“作弊”。我的理智感谢我！

【解决方案2】：

如果您不想使用负边距：

只需在横幅中添加Display: block

工作示例： https://codepen.io/anon/pen/GyMrKy

【讨论】：

【解决方案3】：

检查以确保您的标题没有任何填充或边距。这可能会导致其下方有额外的空白。

【讨论】：