a gap between slider image and nav

Question

I have very small space between the slider image and the nav. I opened the browser inspector and i couldn't find anything, i tried to minify the code and adding margin 0 for both nav top and img bottom i also tried to make line height of li equals to zero but nothing of these solutions worked another thing i want to know if i should put this img inside div and why?

HTML

    <!-- Start Header -->
    <header class="main-header">
        <img src="image/header.jpg" alt="header image">
      <nav>
        <div class="container">
            <ul>
              <li><a href="#">home</a></li>
              <li><a href="#">about</a></li>
              <li><a href="#">services & pricing</a></li>
              <li><a href="#">contact us</a></li>
            </ul>
        </div>
      </nav>
    </header>
    <!-- End Header -->

css

/* reset */
*
{
  margin: 0;
  padding: 0;
  font-family: helvetica, sans-serif;
}

.container
{
  width: 1000px;
  height: auto;
  margin: 0 auto;
}
/* end reset */
/* start header */
header img
{
  width: 100%;
  height: 800px;
}

header nav
{
  background-color: #151C24;
  width: auto;
  height: 30px;
}

header nav ul
{
  text-align: center;
  text-transform: capitalize;

}

header nav ul li
{
  display: inline-block;
  padding: 5px;
  color: #fff
}

header nav ul li::after
{
  content: " |";
}

header nav ul li:last-child::after
{
  content: ""
}

header nav ul li a
{
  text-decoration: none;
  color: #fff
}

header nav ul li a:hover
{
  color: #EBEEF5;
  font-weight: bold;
}
/* end header */

score 2 · Accepted Answer · answered Mar 08 '20 at 17:36

This happens because <img> is an inline-level element so browser adds some whitespace under the baseline to adjust other inline elements. You can "fix" this by adding display: block to the <img> css declaration:

header img {
    width: 100%;
    height: 800px;
    display: block;
}

/* reset */
*
{
  margin: 0;
  padding: 0;
  font-family: helvetica, sans-serif;
}

.container
{
  width: 1000px;
  height: auto;
  margin: 0 auto;
}
/* end reset */
/* start header */
header img
{
  width: 100%;
  height: 800px;
  display: block;
}

header nav
{
  background-color: #151C24;
  width: auto;
  height: 30px;
}

header nav ul
{
  text-align: center;
  text-transform: capitalize;

}

header nav ul li
{
  display: inline-block;
  padding: 5px;
  color: #fff
}

header nav ul li::after
{
  content: " |";
}

header nav ul li:last-child::after
{
  content: ""
}

header nav ul li a
{
  text-decoration: none;
  color: #fff
}

header nav ul li a:hover
{
  color: #EBEEF5;
  font-weight: bold;
}
/* end header */

<!-- Start Header -->
    <header class="main-header">
        <img src="https://gravatar.com/avatar/aee14e4469ed5252cf628e57284833f8?s=80&d=https://static.codepen.io/assets/avatars/user-avatar-80x80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png" alt="header image">
      <nav>
        <div class="container">
            <ul>
              <li><a href="#">home</a></li>
              <li><a href="#">about</a></li>
              <li><a href="#">services & pricing</a></li>
              <li><a href="#">contact us</a></li>
            </ul>
        </div>
      </nav>
    </header>
    <!-- End Header -->

a gap between slider image and nav

1 Answers1