无法使导航栏在顶部填充上变为 0px。

Question

我是 HTML 和 CSS 的新手，现在我的导航栏上的填充有问题，我无法将其 "reach" 置于顶部，在导航栏和网站顶部之间有一个 space，我无法摆脱它。

这是我的 HTML 代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Projekt 2</title>
<link rel="stylesheet" type="text/css" href="p2.css">
</head>  
<body>
<ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">More</a></li>
</ul>
</body>
</html>

和 CSS:

body {
margin: 0;
padding: 0;
padding-top: 0px;
font-family: monospace;
}

.nav {
background-color: dimgrey;
color: white;
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}

现在问题来了，我似乎无法摆脱导航栏上方的白色 space，尽管我已将内边距设置为 0px。我试过改变周围的像素，我试过 padding-top 属性，但似乎没有任何帮助，感谢任何帮助，谢谢！

enter image description here

Answer 1

试试这个，将 margin-top: 0px; 添加到您的 .nav

body {
margin: 0;
padding: 0;
padding-top: 0px;
font-family: monospace;
}

.nav {
background-color: dimgrey;
color: white;
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
margin-top: 0px;
}

<body>
<ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">More</a></li>
</ul>
</body>

Answer 2

也许您的链接样式表中有其他内容覆盖了您在 post 中包含的 CSS？

尝试添加 !important 看看是否能解决问题。这样做实际上是告诉浏览器在其他任何人之上使用它...

例如顶部填充：0 !important;

您还可以为 li 或 a 元素设置填充或边距。也检查那些东西。

Answer 3

UL 标签默认有边距。您只需要删除它们。

.nav {
  background-color: dimgrey;
  color: white;
  list-style: none;
  text-align: center;
  padding: 20px 0 20px 0;
  margin: 0px;
}

Answer 4

试试这个：

   .nav{ 
      padding-top:0px;
    }

无法使导航栏在顶部填充上变为 0px。

Can't make the navbar go 0px on top padding.

html

css

padding

navbar