CODEWITHSUNDEEP
htmlcssnavigationbar
Jakob Heine
Jakob Heine

Reputation: 120

How do I remove the white space above my navigation bar?

I want to have a navigation bar to have no top border, but even if I set "margin" to 0px, there is a little space.

How would I remove that space?

Code:

#navigationBar {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: #333;
}

li {
  display: inline;
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  margin: 0px;
  text-decoration: none;
}

.active {
  background-color: #999999;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  margin: 0px;
  text-decoration: none;
}
<nav>
  <ul id="navigationBar">
    <li class="active">Site1</li>
    <li>Site2</li>
    <li>Site3</li>
    <li>Site4</li>
    <li>Site5</li>
  </ul>
</nav>

Upvotes: 1

Views: 2155

Answers (2)

Hemant Dave
Hemant Dave

Reputation: 26

Reset all the pre-set margins etc with eric meyers reset css, and then remove the default margins.

Upvotes: 0

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

You have not removed the default margin of body and html. add this:

html,body{margin:0}


body,html{margin:0}
#navigationBar {
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        background-color: #333;
    }

    li {
        display: inline;
        float: left;
            display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        margin: 0px;
        text-decoration: none;
    }

    .active {
        background-color: #999999;
    }

    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        margin: 0px;
        text-decoration: none;
        
        }
<nav>
  <ul id="navigationBar">
      <li class="active">Site1</li>
      <li>Site2</li>
      <li>Site3</li>
      <li>Site4</li>
      <li>Site5</li>
  </ul>
</nav>

Upvotes: 3

Related Questions