无法消除身体上额外的顶部空间

时间：2017-03-18 23:45:29

标签： html css

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

enter image description here

我尝试过在这个论坛上找到的最相关的解决方案：我将我的身体和HTML边距和填充重置为0.此外，我确保没有带有顶边距的子元素弄乱我的代码。

＆＃13;
＆＃13; 
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;
}
＆＃13;
＆＃13;
＆＃13;

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

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

许多浏览器为无序列表提供默认的上下边距。你应该添加：

ul {
  margin: 0;
  padding: 0;
}

<小时/>

演示片段：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

试试这个：）

.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;
}
相关问题
最新问题