0

There's a strange gap between header image and navbar and I don't kow how to remove it!

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;
}
jsjsjs
  • 43
  • 3
  • Most likely just a default `margin` vendor style on the `body` tag that needs to be normalized or reset, e.g: `body { margin: auto;}` – UncaughtTypeError Jan 04 '18 at 19:07
  • 2
    Possible duplicate of [Why does my image have space underneath?](https://stackoverflow.com/questions/17905827/why-does-my-image-have-space-underneath) Could you try applying `display: block` to `#banner`? –  Jan 04 '18 at 19:14

3 Answers3

3

Personally, I'd just throw a negative margin on the nav-bar and you're good to go: 

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

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

JPeG
  • 811
  • 6
  • 11
  • it works. Very weird behavior of content to have to use negative margins... – Calvin Nunes Jan 04 '18 at 19:12
  • 1
    @CalvinNunes Agreed, but that is the nature of the beast IMO. In this case you could literally spend hours trying to figure this out when all you really have to do to "fix" it is throw that neg margin in there. Unfortunately, CSS does not allow you to "debug" like JavaScript or other languages so I've found it necessary to "cheat" like this from time to time. My sanity thanks me! – JPeG Jan 04 '18 at 19:35
0

If you don't want to use negative margins:

Just add a Display: block to the banner

working example: https://codepen.io/anon/pen/GyMrKy

Calvin Nunes
  • 6,376
  • 4
  • 20
  • 48
-1

Check to make sure that your header does not have any padding or margins. This may cause it to have extra white space underneath.

Sora
  • 50
  • 4