Space between Li and Navigation bar created by Float. Can't explain.

Question

Hello community,

I have noticed a weird fact. I am trying to create a simple navigation bar with a colored background. When I use the floating technique learned in this course, there's a gap created at the bottom between the list items and the navigation bar.

Take a look at the example below:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Navigation Demo</title>
  </head>
  <body>

<header>
  <h1>Example</h1>
</header>
    <nav>
      <ul>
        <a href="#"><li>Home</li></a>
        <a href="#"><li>portfolio</li></a>
        <a href="#"><li>contat</li></a>
        <a href="#"><li>blog</li></a>
        <a href="#"><li>Gallery</li></a>
        <a href="#"><li>About</li></a>
      </ul>
    </nav>
<section>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
  </body>
</html>

Here is the CSS. I simply add an extra background color in the "Nav" element, because of the floated element and the "inline-block" declaration for the "UL" element. For simplicity, I created a Pen here: https://codepen.io/DeMichieli/pen/EMpEvo

* {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}


header {

text-align: center;
background-color: firebrick;
width: 100%;
padding: 40px 0;
color: white;
}

nav {
text-align: center;
background-color: tomato;
}

nav ul {
color: white;
background-color: tomato;
display: inline-block;

}

nav li {
padding: 20px;
list-style: none;
float: left;
}

nav li:hover {
background-color: red;
}

I do not understand why there's a small gap between the li elements and the bottom of the navigation bar.

If I:

1) Remove the float: left from the Nav Li 2) Add display: inline-block; to Nav Li 3) Remove the extra background color from the Nav

The issue disappears. Why? How can I keep using Guil's technique without creating the extra space?

This the new CSS

* {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}


header {
text-align: center;
background-color: firebrick;
width: 100%;
padding: 40px 0;
color: white;
}

nav {
text-align: center;
}

nav ul {
color: white;
background-color: tomato;
}

nav li {
padding: 20px;
list-style: none;
display: inline-block;
}

nav li:hover {
background-color: red;
}

Answer 1 · 2019-03-19T09:15:43Z

March 19, 2019 9:15am

Hi,

Thanks for the codepen, I have taken a quick look and come up with the below:

https://codepen.io/anon/pen/QoBxBX

The steps I used to resolve it were, check the HTML is valid, just run it through the HTML validator (https://validator.w3.org/nu/#textarea) and you will see that instead of:

<a><li>item</li></a>

It should be:

<li><a>item</a></li>

Then once you have this you can play around with the styling a bit more, I targeted the <a> element for padding and hover.

You should be able to see the styling changes I made in the code pen, you can play around with whatever works for you, but you should have better control over it now the HTML is OK :)

Hope this helps.

Answer 2 · 2019-03-19T15:57:35Z

March 19, 2019 3:57pm

Hello Martin,

I really appreciate you taking the time to answer. That was extremely helpful!

Welcome to the Treehouse Community

Looking to learn something new?

Alexander D

Alexander D

Space between Li and Navigation bar created by Float. Can't explain.

2 Answers

martinjones1

martinjones1

Alexander D

Alexander D

martinjones1

martinjones1