Question

我是HTML和CSS的新手，现在我的导航栏上有填充问题，我无法做到＆＃34;触及＆＃34;在顶部，导航栏和网站顶部之间有一个我无法摆脱的空间。

这是我的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;
}

现在问题是，我似乎无法摆脱导航栏上方的空白区域，尽管我已经将填充设置为0px。我尝试更改像素，我尝试使用padding-top属性，但似乎没什么帮助，感谢任何帮助，谢谢！

enter image description here

Answer 1

尝试此操作，将 margin-top：0px; 添加到 .nav

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

默认情况下，UL标签具有边距。你只需要删除它们。

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

Answer 3

试试这个：

   .nav{ 
      padding-top:0px;
    }

Answer 4

也许您的关联样式表中还有其他内容覆盖了帖子中包含的CSS？

尝试添加！important，看看是否能解决问题。这样做基本上告诉浏览器使用上面的任何其他...

E.g。填充顶部：0！重要;

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

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

4 个答案: