Question

我在一个非常简单的设计中遇到了问题。如您在图像中看到的，导航栏和页面顶部之间有一个白色的间隙。您是否有任何想法，为什么会这样？如您所见，我尝试将padding和margin设置为0，但仍然无法正常工作。

body {
    font: 13px/1.6em "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding:0;
	margin:0;
	border:0;
}
@font-face{
	font-family: "JMH Typewriter dry";
	font-weight: bold;
	src: url("Fonts/JMH Typewriter dry.otf");
}
nav li{
	display:inline;
	font-size: 20px;
}
nav li a{
	text-decoration:none;
	font-family: "JMH Typewriter dry";
	color: black;
}
nav{
	background-image: url("https://img.freepik.com/free-vector/elegant-green-geometric-polygon-background_1035-13146.jpg?size=338&ext=jpg");
}

<!DOCTYPE HTML>
<html>
<head> 
<link rel="stylesheet" href="style.css">
<title> Home Page </title></head>
<body>
<nav> 
<ul>
<li><a href "index.html"> <img src="https://i.imgur.com/L7LNe0P.png"/> Home Page </a></li>
<li><a href="about.html"> <img src="https://i.imgur.com/L7LNe0P.png"/> About </a></li>
<li><a href="media.html"><img src="https://i.imgur.com/L7LNe0P.png"/>  Media </a></li>
</ul>
</nav>
</body>
</html>

Answer 1

因为ul本身也默认具有margin：

body {
  font: 13px/1.6em "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 0;
  margin: 0;
  border: 0;
}

@font-face {
  font-family: "JMH Typewriter dry";
  font-weight: bold;
  src: url("Fonts/JMH Typewriter dry.otf");
}

nav ul {
  margin: 0;
}

nav li {
  display: inline;
  font-size: 20px;
}

nav li a {
  text-decoration: none;
  font-family: "JMH Typewriter dry";
  color: black;
}

nav {
  background-image: url("https://img.freepik.com/free-vector/elegant-green-geometric-polygon-background_1035-13146.jpg?size=338&ext=jpg");
}

<nav>
  <ul>
    <li>
      <a href "index.html"> <img src="https://i.imgur.com/L7LNe0P.png" /> Home Page </a>
    </li>
    <li>
      <a href="about.html"> <img src="https://i.imgur.com/L7LNe0P.png" /> About </a>
    </li>
    <li>
      <a href="media.html"><img src="https://i.imgur.com/L7LNe0P.png" /> Media </a>
    </li>
  </ul>
</nav>

Answer 2

浏览器会自动为您使用的无序列表<ul>提供一个空白。您可以通过添加以下CSS规则来覆盖此行为：

nav ul {
    margin: 0;
}

如何消除页面顶部的空白？

2 个答案: