不需要 Space 在 <header> 和 <nav> 之间

Question

我有以下 HTML5 代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
  max-width: 960px;
  margin: 0 auto;
  font-size: 120%;
}
header, nav {
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
header {
  border-color: red;
}
img.mainpicture {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>
<header>
<img class="mainpicture" src="http://s29.postimg.org/ajjbb0n07/apic.jpg" alt="A picture"/></header><nav>Navigation area.</nav>
</body>
</html>

谁能解释一下为什么 <header> 和 <nav> 内容之间有大约 5 个像素的空白 space，我该如何删除它？

通过添加

header {
  padding-bottom: 1px;
}

到CSS文件，白色space的高度加长了一个像素，看来和<header>的padding没有关系.

编辑：我想不使用 <nav style="position: relative; top:-7px;">。

Answer 1

可能是因为里面的元素有一个margin，是凸出来的！而且因为你有一个<img />，所以给它一个display: block;。为 header、nav:

尝试 overflow: hidden;

header, nav {
  overflow: hidden;
}

header img {
  display: block;
}

Answer 2

只需添加

img.mainpicture{
.....................
.....................
vertical-align: top;
}

这将解决问题:)

Answer 3

在图像上设置显示块以解决拟合问题。

body {
  max-width: 960px;
  margin: 0 auto;
  font-size: 120%;
}
header,
nav {
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
img.mainpicture {
  width: 100%;
  display: block;
}

<header>
  <img class="mainpicture" src="//lorempicsum.com/futurama/960/200/2" alt="A picture" />
</header>
<nav>
  Navigation area.
</nav>

Answer 4

将属性 margin-bottom 设置为零。

margin-bottom: 0;

不需要 Space 在 <header> 和 <nav> 之间

Unwanted Space Between <header> and <nav>

css

html

whitespace

semantic-markup