css - ナビゲーション バー項目のわずかなスペース - レイアウトの問題

Question

firebugなどでナビゲーション アイテムを調べ<a class="nav_anchor">たり、それらの上にカーソルを置いたりすると、各ナビゲーション アイテムの右側に推定 5 ピクセルの間隔が表示されるのが気に入っています。

ナビゲーション内でこれが発生する原因を突き止めることにほとんど成功していません。提案があれば大歓迎です。

ここにリンクがあります：http://www.the-session.co.uk/pros/

おそらく、この画像は問題を示すのに役立ちます:

Answer 1

Inline & inline-block elements are affected by any white-space in your HTML. This is causing the small gap between each list-item. You can either comment the space out, or you can manually delete it. You can also float: left; each <li> or to give a negative left-margin by a few px

More info

Answer 2

修正後のCSSはこちら

#main_menu {
    padding: 7px 10px 7px 20px;
    background-color: #6bb8c7;
    background-image: -moz-linear-gradient(top, #6bb8c7, #6cadde);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6bb8c7), to(#6cadde));
    background-image: -webkit-linear-gradient(top, #6bb8c7, #6cadde);
    background-image: -o-linear-gradient(top, #6bb8c7, #6cadde);
    background-image: linear-gradient(to bottom, #6bb8c7, #6cadde);
    height: 50px;
}
.menu_item, .menu_item_first {
    display:inline;
    border-right: 1px solid #000000;
    margin: 0;
    float: left;
}
a.nav_anchor {
    padding: 7px 17px;
    text-decoration: none;
    color:black;
    float: left;
}

メニュー div コンテナに高さを追加し、li とアンカーに float:left を追加するだけです。