Unwanted Space Between <header> and <nav>

Question

Unwanted Space Between <header> and <nav>

919 views Asked by Snackoverflow At 16 June 2015 at 10:11

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;">.

Original Q&A

There are 4 answers

Praveen Kumar Purushothaman On 16 June 2015 at 10:19

It could be because of the inner elements having a margin, that is protruding outside! And also since you have an <img />, give a display: block; to it. Try overflow: hidden; for both header, nav:

header, nav {
  overflow: hidden;
}

header img {
  display: block;
}

Som On 16 June 2015 at 10:22

Just add

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

That will fix the issue:)

Hector G Barron On 22 June 2020 at 00:38

Set the property margin-bottom equal to zero.

margin-bottom: 0;

**Mehdi Brillaud** · Accepted Answer · 2015-06-16T10:25:27+00:00

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>

TechQA.

Unwanted Space Between <header> and <nav>

There are 4 answers

Related Questions in CSS

Related Questions in HTML

Related Questions in WHITESPACE

Related Questions in SEMANTIC-MARKUP

Popular Questions

Popular Tags

Trending Questions