如何消除标题和导航栏之间的差距？

Question

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

Problem code itself。

<!-- 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;
}

Answer 1

就个人而言，我只是在导航栏上留下一个负余量，你很高兴：

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

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

Answer 2

如果您不想使用负边距：

只需在横幅上添加Display: block

即可

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

Answer 3

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