Search code examples
csshtmlwhitespacesemantic-markup

Unwanted Space Between <header> and <nav>

I have the following HTML5 code:

<!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>

Can someone please explain why there is about 5 pixels of empty space between the <header> and the <nav> content, and how can I remove it?

By adding

header {
  padding-bottom: 1px;
}

to the CSS file, the height of the white space is extended by one pixel, so it doesn't seem to have anything to do with the padding of <header>.

EDIT: I would like to do it without using <nav style="position: relative; top:-7px;">.

Solution

  • Set display block on the image for fixing fitting issues.

    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>