CODEWITHSUNDEEP
htmlcss
user4913675
user4913675

Reputation:

HTML & CSS white gap above navbar

I'm still new to HTML & CSS. I've experienced a issue which I can't figure out how to fix.

There is a white gap above the navbar. Is it possible I can do it so it's attached to the top.

HTML

<div class="navbar">
    <ul style="float:right;list-style-type:none;">
        <li><a href="mailto:[email protected]">CONTACT US</a></li>
        <li><a href="#">JOBS</a></li>
        <li><a href="#">NEWS AND EVENTS</a></li>
        <li><a href="#">BUISNESS</a></li>
        <li><a href="#">COURSES</a></li>
        <li><a href="#">ABOUT EPPING FOREST COLLEGE</a></li>
        <li><a href="#">HOME</a></li>
     </ul>
</div>

CSS

.navbar {
    margin-top: 0px;
}
.navbar ul {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    list-style-type: none;
    background-color: #333;
}

.navbar li {
    float: right;
    font-weight: 700;
}

.navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar li a:hover {
    background-color: #e74c3c;
}

Upvotes: 0

Views: 911

Answers (8)

Iqbal Pasha
Iqbal Pasha

Reputation: 1316

yes there is border top at .navbar class add this line in .navbar {border-top : 0px;}

Upvotes: 0

Ricardo
Ricardo

Reputation: 1

You could do something like this

   *{
padding:0;
margin:0;
}

the problem of it is you'll need to set a margin and padding at every div that you make.

OR

  ul{
margin:0;
padding:0;
}

Upvotes: 0

Sabbir Ahmed Siddiquee
Sabbir Ahmed Siddiquee

Reputation: 189

Just use margin: 0; inside like this.

.navbar ul{margin: 0;}

Check demo here

Upvotes: 0

Chihab JRAOUI
Chihab JRAOUI

Reputation: 216

try this:

html, body
{
     padding: 0;
     margin: 0;
}

Upvotes: 0

solimanware
solimanware

Reputation: 3051

Use the following code to remove the margin of the ul

The default margin is 16px

ul {
  margin:0;
}

WORKING DEMO

Upvotes: 0

Heis
Heis

Reputation: 568

A browser has some default margin and padding so you can undo this in your CSS by putting in:

body{
margin:0;
padding: 0;
}

Upvotes: 0

herrh
herrh

Reputation: 1368

Try this css, because of the browsers default margin of the ul.

.navbar ul {
  margin: 0 auto;
}

Upvotes: 3

Anoxy
Anoxy

Reputation: 953

There is always a default margin and padding from the browser so you have to do this in your css

body{
margin:0;
padding:0;}

Upvotes: 0

Related Questions