メニューをinline要素で横並びしたときに余白が空いてしまう

|

以前のコラムで、リスト(liタグ)で作ったメニューを横並びにする方法を紹介したのですが、inline要素を使用すると、謎の余白(隙間)が空いてしまうということでした。

これは、ブラウザが改行を空白類文字をして認識してしまうからです。つまり、改行を半角スペースが空いているとみなしてしまいます。

とすると、この余白を消すには、半角スペース分をCSSでネガティブマージンを使用して相殺してしまえばよさそうです。

例えば、以下のようなリストを横並びにします。

(X)HTMLコード

<ul class="menu">
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>
</ul>

CSSでは、半角スペース分をletter-spacingで制御します。ulのletter-spacingを0.40em分小さくしておいて、liのletter-spacingは元に戻しておきます。

CSSコード

ul.menu {
   letter-spacing:-0.40em;
}

ul.menu li {
   display:inline;
   letter-spacing:normal;
}

ただし、この方法ではOperaには効きません。

そこでさらに、ulのfont-sizeを0にして、liのfont-sizeを任意の値を指定します。ただしpx表記以外はブラウザ間で差異が出てしまうので注意です。Operaだけに有効なhackがあれば相対表示もできるのですが、無いようなので・・・。

CSSコード

ul.menu {
   letter-spacing:-0.40em;
   font-size:0;
}

ul.menu li {
   display:inline;
   letter-spacing:normal;
   font-size:16px;
}

ちなみに、font-sizeでの指定はSafariやChromeといったWebkit系ブラウザでは有効ではないようです。このCSSはWindowsXP上のFarefox3.6.13、Opera11.00、Safari5.0.2、Chrome8.0、IE6で確認済みです。

最近のブログ記事