无法移除身体上方的额外顶部空间答案

【问题标题】：Can't remove extra top space over body无法移除身体上方的额外顶部空间
【发布时间】：2017-03-19 08:57:34
【问题描述】：

我正在制作一个非常基本的网站，但无法删除 body 元素上方的额外顶部空间。在 Chrome 和 Firefox 中都是这样的：

我已经尝试了我在这个论坛上找到的最相关的解决方案：我将正文和 HTML 边距和内边距重置为 0。此外，我确保没有顶部边距的子元素与我的代码混淆。

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

.navbar {
	background:#312c2a;
	height: 30px;
	text-align:center;
}

.navbar li {
	display: inline-block;
	margin-right:20px;
	margin-left:20px;
}

.navbar a {
	color: white;
	font-size:20px;
	font-family: 'Trebuchet MS', serif;
	font-weight: bold;
	text-decoration: none;
}

这是我的 HTML 代码。我真的找不到任何问题。有什么想法吗？

<!DOCTYPE html>
<html>

<head>
	<title>Poesía en traducción</title>
	<meta charset="utf-8"/>
	<link rel="icon" type="image/png" href="imgs/favicon.png"/>
	<link rel="stylesheet" type="text/css" href="main.css"/>
</head>

<body>	

	<div class="navbar">
		<ul>
			<li><a href="about.html">quiénes somos</a></li>
			<li><a href="autores.html">autores</a></li>
			<li><a href="poemas.html">poemas</a></li>
			<li><a href="servicios.html">servicios de traducción</a></li>
			<li><a href="contacto.html">contacto</a></li>
		</ul>
	</div>

	<div class="portada">

	</div>

</body>

</html>

【问题讨论】：

标签： html css

【解决方案1】：

许多浏览器为无序列表提供默认的顶部和底部边距。您应该添加：

ul {
  margin: 0;
  padding: 0;
}

演示片段：

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

.navbar {
  background: #312c2a;
  height: 30px;
  text-align: center;
}

.navbar li {
  display: inline-block;
  margin-right: 20px;
  margin-left: 20px;
}

.navbar a {
  color: white;
  font-size: 20px;
  font-family: 'Trebuchet MS', serif;
  font-weight: bold;
  text-decoration: none;
}

<!DOCTYPE html>
<html>

<head>
  <title>Poesía en traducción</title>
  <meta charset="utf-8" />
  <link rel="icon" type="image/png" href="imgs/favicon.png" />
  <link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>

  <div class="navbar">
    <ul>
      <li><a href="about.html">quiénes somos</a></li>
      <li><a href="autores.html">autores</a></li>
      <li><a href="poemas.html">poemas</a></li>
      <li><a href="servicios.html">servicios de traducción</a></li>
      <li><a href="contacto.html">contacto</a></li>
    </ul>
  </div>

  <div class="portada">

  </div>

</body>

</html>

【讨论】：

【解决方案2】：

试试这个:)

.navbar {
     width: 100%;
     height: 70px;
     background: black;
     margin-left: auto;
     margin-right: auto;
     position: fixed; /*fixed, relative, or absolute like you want*/
     top: 0px;
     z-index: 200;
}



ul {
     margin: 0;
     padding: 0;
}

和

.body{
    margin: 0;              
    padding: 0;
    background-color:white;
}

【讨论】：