CSS Horizontal List/Nav with unwanted bottom padding

Question

Trying to get rid of some weird bottom padding under the nav items, which is being caused by the navigation .span style (which is the one that makes things work so I can't get rid of it). I want the nav items to be flush to the top and bottom.

I've been using this bit of coder for the longest time and I think it's either the first time I notice the padding or I've just been sweeping it under the rug.

Fiddle here http://jsfiddle.net/arminvit/B2sAn/

Quick look at the code below:

CSS

/* NAVIGATION */

.navigation {
width:100%;
clear:both;
float:left;
text-align:justify;
padding:0;
margin:0;
}

.navigation * {
display: inline;
margin:0;
padding:0;
}

.navigation ul {
list-style-type: none; 
margin:0;
padding:0;
}

.navigation li {
font-family:Arial;
font-size:12px;
color:white;
background:black;
padding:5px;
margin:0px;
white-space:nowrap;
}

.navigation span {
display: inline-block;
position: relative;
width: 100%;
height:0;
margin:0;
padding:0;
}

HTML

    <div class="navigation">

        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>

        <span></span>

    </div><!--END navigation-->

Answer 1

Not too sure of what you want, but seems to be a mixed or left overs of differents method . So if you want to text-align justify your links, drop all about floatting.
http://jsfiddle.net/69LjY/
some to read : http://www.barrelny.com/blog/text-align-justify-and-rwd/

/* NAVIGATION */

    .navigation {
    width:100%;
    text-align:justify;
    padding:0;
    margin:0;
    }

    .navigation ul {
    list-style-type: none; 
    margin:0;
    padding:0;
    line-height:0;
    }

    .navigation li {
    font-family:Arial;
    font-size:12px;
    color:white;
    background:black;
    padding:5px;
    margin:0px;
    display:inline-block;
    line-height:1.2em;
    }
.navigation ul:after {content:'';padding-right:2700px;}/* line-height 0 + this avoid gaps under , padding , use widest screen width you like*/

Answer 2

I added another navigation bar to your Fiddle with some CSS classes and markup that, I think, give it the effect you were looking for. (CSS below)

.test_nav{
   background:orange;   
}
.test_nav_bar{
   list-style-type: none;
}
.test_nav_bar li{
   display: inline-block;
   background: gray;
   margin-left:50px;
   padding: 5px;
}

Obviously you should play around with the spacing etc.

Hope that helped!

Answer 3

remove display: inline-block; from .navigation span