How to Remove Whitespace Above Navbar?

Question

I have a top navbar on my test site that has space above with the body background color. I want to remove this so that the nav extends vertically to cover the viewport (that light blue color becomes the dark blue color of nav background color):

body {
  background-color: #cce6ff;
  margin: 0px;
  border: 0px;
}
nav {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 20px;
  background-color: #000033;
  height: 45px;
}
li {
  list-style-type: none;
  float: right;
  border-right: 2px solid white;
}
li:first-child {
  border-right: hidden;
}
li a {
  color: white;
  padding-left: 5px;
  padding-right: 5px;
}

<nav id="navbar">
  <ul>
    <li><a class="top-nav" id="home" href="#home">Home</a></li>
    <li><a class="top-nav" id="about-me" href="#about-me">About Me</a></li>
    <li><a class="top-nav" id="my-work" href="#my-work">My Work</a></li>
    <li><a class="top-nav" id="contact" href="#contact">Contact</a></li>
  </ul>
</nav>

I don't know where it's inheriting that space/padding from so I don't know how to troubleshoot it. I feel like I've tried everything.

score 0 · Answer 1 · answered Apr 23 '20 at 17:30

It's a default user agent style that your browser puts it in if you don't have a style set in a CSS reset for example. Set ul to have margin: 0 for this problem specifically.

body {
  background-color: #cce6ff;
  margin: 0px;
  border: 0px;
}
nav {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 20px;
  background-color: #000033;
  height: 45px;
}
ul {
   margin: 0;
}
li {
  list-style-type: none;
  float: right;
  border-right: 2px solid white;
}
li:first-child {
  border-right: hidden;
}
li a {
  color: white;
  padding-left: 5px;
  padding-right: 5px;
}

<nav id="navbar">
  <ul>
    <li><a class="top-nav" id="home" href="#home">Home</a></li>
    <li><a class="top-nav" id="about-me" href="#about-me">About Me</a></li>
    <li><a class="top-nav" id="my-work" href="#my-work">My Work</a></li>
    <li><a class="top-nav" id="contact" href="#contact">Contact</a></li>
  </ul>
</nav>

score 0 · Answer 2 · answered Apr 23 '20 at 17:31

Remove the nav tag and make the ul the only parent to the list elements and make the ul have a margin of 0.

body {
  background-color: #cce6ff;
  margin: 0px;
  border: 0px;
}
#navbar {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 20px;
  background-color: #000033;
  height: 45px;
  margin-top: 0;
}
li {
  list-style-type: none;
  float: right;
  border-right: 2px solid white;
}
li:first-child {
  border-right: hidden;
}
li a {
  color: white;
  padding-left: 5px;
  padding-right: 5px;
}

<ul id="navbar">
    <li><a class="top-nav" id="home" href="#home">Home</a></li>
    <li><a class="top-nav" id="about-me" href="#about-me">About Me</a></li>
    <li><a class="top-nav" id="my-work" href="#my-work">My Work</a></li>
    <li><a class="top-nav" id="contact" href="#contact">Contact</a></li>
  </ul>

Hope this helps

score -1 · Answer 3 · answered Apr 23 '20 at 17:31

-1

Reset the margins and padding of all the elements. Also ensure you are not using some other CSS library

/*Reset the padding and margin for all the elements. Box sizing is optional*/
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

answered Apr 23 '20 at 17:31

Silverman42

111
7

score -1 · Accepted Answer · answered Apr 23 '20 at 17:33

-1

add this to your CSS:

ul {
margin-top= 0px;
}

answered Apr 23 '20 at 17:33

NotTschuschl

85
1
11

This worked. Thank you. – calcodes26 Apr 23 '20 at 17:38
1

This syntax is wrong and it also affects all the possible ul elements. You should consider using normalize.css or something similar to use regular styles across browsers. Using `* { margin: 0 }` is also a bad idea. – Mihail Minkov Apr 23 '20 at 17:39
It is not wrong and using normalize.css is difficult to use as a beginner. But you are right browsers render differently. – NotTschuschl Apr 23 '20 at 17:43
@NotTschuschl `margin-top= 0px;` is not invalid syntax? – Mihail Minkov Apr 24 '20 at 16:50
Actually let me correct myself em or % would be better. Because of those units being responsive – NotTschuschl Apr 25 '20 at 10:18
@NotTschuschl I was actually referring to the `=` sign. That is completely invalid CSS syntax. – Mihail Minkov Apr 26 '20 at 18:44
yeah should be margin-top: 0px; – NotTschuschl Apr 27 '20 at 15:23

How to Remove Whitespace Above Navbar?

4 Answers4