CSS menu background

Question

any ide what is it? The white box between two menu item.(circled with red)

CSS:

 #navigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    line-height: 50px;
}

#navigation a {
    text-decoration: none;
    display: inline-block;
    padding-bottom: 15px;
    color: #383838;
    webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.4s;
}

#navigation a:hover {
    color: #6A98DD;
}

#navigation li {
    display: inline-block;
    padding-left: 9px;
    padding-right: 10px;
    color: #383838;
    background: #EEE;
    webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.6s;
    webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -ms-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}

#navigation li:hover {
    padding-left: 8px;
    color: #6A98DD;
    display: inline-block;
    background: #EEE;
    border-left: 1px solid #AAA;
}

Answer 1

It is because your li are set to display: inline-block; - inline elements are effectively treated like textual nodes, so if each li is on a newline in your HTML this is interpreted as a space.

There are a number of ways to prevent this- one is to set font-size:0; on your ul then font-size:14px; on your li

Alternatively, you can float:left your li and set overflow:hidden on your ul

Or, you can remove the newline in your HTML- putting all your li on a single line.

See here for some other techniques and information , and here

Answer 2

Inline block display mode is the culprit.

#navigation li {
    display: inline-block;
    ...
}

Instead, you can make this way, with the above code, add this in the end:

#navigation {
    overflow: hidden;
}
#navigation li {
    float: left;
}

Answer 3

Float your li's left like so;

#navigation li {
    float: left;
}

Answer 4

the solution is:

Set float left on elements. Or...

Set font-size: 0 on parent and reset font size on children font-size: 1 .

That happens becouse of white space between elements . another solution is to use some syntax that prevents spaces, like so:

<div id="navigation">
    <li><a href="#">Item 01</a></li><li>
    <a href="#">Item 02</a></li><li>
    <a href="#">Item 03</a></li><li>
    <a href="#">Item 04</a></li><li>
    <a href="#">Item 05</a></li>
</div>

Here an example:

1) set float left on childern: http://jsfiddle.net/27t5ogsj/2/

2) font-size method (simply css): http://jsfiddle.net/27t5ogsj/

3) html pre-format method: http://jsfiddle.net/27t5ogsj/1/

Personally i like the second method becouse then i can center horizontally the menu with an simple text-align: center on parent! http://jsfiddle.net/27t5ogsj/3/