删除列表项和导航顶部之间的间隙

she*_*jay 1 html css

大家好,这里是初级开发人员,我的网页遇到很多问题。

但主要的一个是我的导航链接和导航栏顶部之间的间隙。

我尝试了很多解决方案,但似乎没有一个有帮助。即使对于网站中的其他问题,我真的很感激任何帮助。请记住,该网站还远未完成,我是初学者。谢谢。

在此输入图像描述

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>
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)

flv*_*vps 5

导航栏中的 ul 上有一些默认边距。

#topnav ul{
  margin:0;
}
Run Code Online (Sandbox Code Playgroud)

或使用以下命令重置所有元素的边距和填充:

* {
  margin: 0;
  padding: 0;
}
Run Code Online (Sandbox Code Playgroud)