Question

导航栏顶部与徽标图形底部之间有一点白色间隙。我怎么能把这些粘在一起？我错过了标题或 nav 这样的选择器吗？也许我错过了一个宣言？

＆＃13;

body {
  background-color: #FFFFFF;
  margin: 0px;
  padding: 0px;
  text-align: center;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: inline-block;
  border: 5px solid #0009bc;
}

li {
  float: left;
}

a:link, a:visited {
  display: block;
  width: 140px;
  font-weight: bold;
  color: #20dbd4;
  background-color: #000000;
  text-align: center;
  padding: 12px;
  text-decoration: underline;
  text-transform: uppercase;
}

a:hover, a:active {
  background-color: #20dbd4;
  color: #000000;
}

＆＃13;

<!DOCTYPE html>

<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<meta name="robots" content="noindex, nofollow, noarchive"/>
<title>Grid Design</title>
</head>

<body>
  <header>
    <img src="/images/grid-design.jpg" alt="Grid Design" style="width: 987px; height: 243px;"/>
  </header>
  <nav>
     <ul>
      <li><a href="#home">home</a></li>
      <li><a href="#news">news</a></li>
      <li><a href="#about">about</a></li>
      <li><a href="#products">products</a></li>
      <li><a href="#photos">photos</a></li>
      <li><a href="#contact">contact</a></li>
    </ul>
  </nav>
</body>

</html>

＆＃13;

Answer 1

只需将图片声明为display:block，然后根据需要居中。

默认情况下，该图片为display:inline，这意味着它受whitespace影响...将图片转换为块元素可以解决问题。

JSfiddle Demo

<强> CSS

header img {
    display: block;
    margin: 0 auto;
}

Answer 2

您可以将导航的边距设置为-4，所以：

<强> CSS：

nav {
     margin: -4px 0 0 0;
}

但这不是唯一的方法......实际上这应该是你的最后一招！有几种更好的方法可以做到这一点。

导航栏和徽标图形不会粘在一起

2 个答案: