html - HTML-徽标和导航栏之间的空间 | 徽标和导航栏之间的空间

我似乎无法弄清楚为什么会这样：

我找不到错误，我尝试了许多解决方案，但他们没有解决问题。请帮助

body {
  margin: 0;
  padding: 0;
}
.logo {
  margin: 0;
  padding: 0;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}
.active {
  background-color: #222;
}

<a href="index.html" class="logo">
  <img src="img/logo.png" width=400em height=150em></img>
</a>
<div>
  <ul>
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</div>

最佳答案

在图像上添加了display: block; ...

body {
  margin: 0;
  padding: 0;
}
.logo {
  margin: 0;
  padding: 0;
}
.logo img {
  display: block;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}
.active {
  background-color: #222;
}

<!DOCTYPE HTML>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css.css" />
  <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400italic' rel='stylesheet' type='text/css'>
</head>

<body>
  <a href="index.html" class="logo">
    <img src="img/logo.png" width="400em" height="150em">
  </a>
  <div>
    <ul>
      <li><a class="active" href="index.html">Home</a>
      </li>
      <li><a href="about.html">About</a>
      </li>
    </ul>
  </div>
</body>

</html>

关于html - HTML-徽标和导航栏之间的空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37645950/