css - 李の間のスペース

Question

li とそれを削除する方法の間にスペースがあるのはなぜですか? （おそらくフロートまたは絶対配置で解決できますが、テキストを各単語の長さに合わせて、ul全体を中央に配置したい）

再生して確認する場所は次のとおりです: 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; 
}