Remove gap between list items and top of navigation

Question

Hey guys junior dev here and I'm having lots of issues with my webpage.

but the main one is a gap between my navigation links and the top of the navbar.

I have tried a lot of solutions but none seem to help. Really would appreciate any help even for other issues in the website. Please remember that the site is far from finished and I am a beginner.Thank you.

enter image description here

HTML:

<!DOCTYPE html>
<html>
<head>
<link href="dinnerdrone.css" rel="stylesheet"type="text/css"/>
<title>Dinner Drone Site</title>
</head>
<body>  

<!-- Code for Header Navgation -->
<div id="topnav">
    <ul >
        <li class="link"><a href="dinnerdrone.html">Home</a></li>
        <li class="link"><a href="contactus.html">Contact Us</a></li>
        <li class="link"><a href="login.html">Log In</a></li>
        <li class="link"><a href="signup.html">Sign Up</a></li>
        <li class="link"><a href="aboutus.html">About Us</a></li>
    </ul> 
</div>

<!-- Code for title -->
<div id="title">
<p>Dinner Drone</p>
</div>

<!-- Code for subtitle -->
<div id="subtitle">
<p>Your favorite meals in the safest way</p>
</div>

CSS:

/* Body styles*/
body {
  font-family:verdana,geneva,helvetica;
  background-color: #0B0C10;
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}

/* The navigation bar styles */
#topnav {
  position: fixed;
  top: 0;
  bottom: 0;
  background-color: #66FCF1;
  text-decoration: none;
  width: 100%;
  height: 80px;
}

/* website navigation bar list styles*/
#topnav li {
  background-color: white;
  float: right;
}

/* website navigation bar link styles*/
#topnav a {
  display: block;
  padding-top: 20px;
  padding-right: 15px;
  padding-bottom: 17px;
  height: 100%; 
  color: #66FCF1;
  font-size: 22px;
  text-decoration: none;
}

#topnav a:hover {
  transition: 0.5s;
  color: blue;
}

/* Style for web heading beneath topnav */
#title {
  color: #66FCF1;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-align: center;
  font-size: 100px;
}

/* Style for text beneath title */
#subtitle {
  background-color: #5CDB95;
  margin-top: 20px;
  text-align: center;
  border: 1px solid black;
  font-size: 30px;
}

flvps · Accepted Answer · 2023-02-17T08:30:10.333

5

There is some default margin on your ul in the navbar.

#topnav ul{
  margin:0;
}

or reset the margin and padding for all elements with:

* {
  margin: 0;
  padding: 0;
}

edited Feb 17 '23 at 08:30

answered Jul 11 '20 at 18:14

flvps

179
1
9

Hi I tried this out :#topnav ul{ margin:0; } but now the gap is n the bottom not sure what im doing wrong – shemjay Jul 11 '20 at 21:16
You set the height of your `#topnav` to `80px` but your item don't are not tall enough to fill the `#topnav`'s height. – flvps Jul 11 '20 at 21:47

score 0 · Answer 2 · answered Jul 11 '20 at 18:11

0

#topnav ul{
  margin: 0;
}

By the browser, ul element has in default some margin. So this selector should fix it.

answered Jul 11 '20 at 18:11

Petr Nečas

426
3
11

score 0 · Answer 3 · answered Jul 11 '20 at 18:11

set margin to 0 on the ul in the navbar

body {
  font-family:verdana,geneva,helvetica;
  background-color: #0B0C10;
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}

/* The navigation bar styles */
#topnav {
  position: fixed;
  top: 0;
  bottom: 0;
  background-color: #66FCF1;
  text-decoration: none;
  width: 100%;
  height: 80px;
}

/* website navigation bar list styles*/
#topnav li {
  background-color: white;
  float: right;
}

ul{
margin:0;}

/* website navigation bar link styles*/
#topnav a {
  display: block;
 padding-top: 20px;
  padding-right: 15px;
 padding-bottom: 17px;
 height: 100%; 
  color: #66FCF1;
  font-size: 22px;
  text-decoration: none;
}

#topnav a:hover {
  transition: 0.5s;
  color: blue;
}

/* Style for web heading beneath topnav */
#title {
  color: #66FCF1;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-align: center;
  font-size: 100px;
}

/* Style for text beneath title */
#subtitle {
  background-color: #5CDB95;
  margin-top: 20px;
  text-align: center;
  border: 1px solid black;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>
<link href="dinnerdrone.css" rel="stylesheet"type="text/css"/>
<title>Dinner Drone Site</title>
</head>
<body>  

<!-- Code for Header Navgation -->
<div id="topnav">
    <ul >
        <li class="link"><a href="dinnerdrone.html">Home</a></li>
        <li class="link"><a href="contactus.html">Contact Us</a></li>
        <li class="link"><a href="login.html">Log In</a></li>
        <li class="link"><a href="signup.html">Sign Up</a></li>
        <li class="link"><a href="aboutus.html">About Us</a></li>
    </ul> 
</div>

<!-- Code for title -->
<div id="title">
<p>Dinner Drone</p>
</div>

<!-- Code for subtitle -->
<div id="subtitle">
<p>Your favorite meals in the safest way</p>
</div>

score 0 · Answer 4 · answered Jul 11 '20 at 18:14

You could use flex to get proper height to set up nav links. Below snippet showing it.

.topbar {
  width: 100%;
  height: 60px;
  background-color: #eee;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.logo {
  position: relative;
  width: 20%;
  background-color: red;
}

.navbar { 
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.navbar a {
  padding: 0 5px;
  text-decoration: none;
  color: #000;
}

<div class="topbar">
  <div class="logo">
  Logo
  </div>
  <div class="navbar">
    <a href="#">Link1</a>
    <a href="#">Link2</a>
    <a href="#">Link3</a>
    <a href="#">Link4</a>
    <a href="#">Link5</a>
    <a href="#">Link6</a>
  </div>
</div>

score 0 · Answer 5 · answered Jul 11 '20 at 18:21

set margin to 0 on the ul in the navbar and set #topnav li height to 80px

body {
  font-family:verdana,geneva,helvetica;
  background-color: #0B0C10;
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}

/* The navigation bar styles */
#topnav {
  position: fixed;
  top: 0;
  bottom: 0;
  background-color: #66FCF1;
  text-decoration: none;
  width: 100%;
  height: 80px;
}

/* website navigation bar list styles*/
#topnav li {
  background-color: white;
  float: right;
  height:80px;
}

ul{
margin:0;}

/* website navigation bar link styles*/
#topnav a {
  display: block;
 padding-top: 20px;
  padding-right: 15px;
 padding-bottom: 17px;
 height: 100%; 
  color: #66FCF1;
  font-size: 22px;
  text-decoration: none;
}

#topnav a:hover {
  transition: 0.5s;
  color: blue;
}

/* Style for web heading beneath topnav */
#title {
  color: #66FCF1;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-align: center;
  font-size: 100px;
}

/* Style for text beneath title */
#subtitle {
  background-color: #5CDB95;
  margin-top: 20px;
  text-align: center;
  border: 1px solid black;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>
<link href="dinnerdrone.css" rel="stylesheet"type="text/css"/>
<title>Dinner Drone Site</title>
</head>
<body>  

<!-- Code for Header Navgation -->
<div id="topnav">
    <ul >
        <li class="link"><a href="dinnerdrone.html">Home</a></li>
        <li class="link"><a href="contactus.html">Contact Us</a></li>
        <li class="link"><a href="login.html">Log In</a></li>
        <li class="link"><a href="signup.html">Sign Up</a></li>
        <li class="link"><a href="aboutus.html">About Us</a></li>
    </ul> 
</div>

<!-- Code for title -->
<div id="title">
<p>Dinner Drone</p>
</div>

<!-- Code for subtitle -->
<div id="subtitle">
<p>Your favorite meals in the safest way</p>
</div>

Remove gap between list items and top of navigation

5 Answers5