Space between li

Question

Why is there an space between li and how to remove it? (Perhaps I could solve it with float or absolute positioning but I want the text adapt to the length of each word and the whole ul be centered)

Here is a place to play and check: http://jsfiddle.net/Z258Q/

HTML:

<ul>
    <li><a href="#">First</a></li>
    <li><a href="#">Second more long</a></li>
</ul>

CSS:

a { outline:0; text-decoration: none ; color:#aaa; }

ul {
    margin:40px auto;
    list-style-type:none;
    padding:0;
    text-align: center;
}

ul li {
    position: relative;
    padding: 7px 17px;
    margin-right: 0px;
    border:1px solid; border-color:#ccc;
    border-bottom:0px; border-top:0px;
    height:8px; line-height:8px;
    display: inline-block;
}
ul li a {
    display:block; 
}

Answer 1

Because you've used inline-block as the display type, the white-space is taken into account in the output. Remove the white-space in your markup and the gap will go with it.

<ul>
    <li>
        <a href="#">First</a>
    </li><li> <!-- < The gap WAS between this closing and opening tag -->
        <a href="#">Second more long</a>
    </li>
</ul>

Here's your updated jsFiddle

Answer 2

Because you made them inline-block. It means the browser will compound whitespace between the inline elements to a single space and uses it to render the items inline...

The solution can be simply to make sure no whitespace is left between the elements, like I did in your update jsfiddle.

As for having only a single border, left and right, see comments and the updated jsfiddle here.