インライン要素に背景画像をうまいこと指定したい。

横一列に並ぶリスト（インライン要素）にCSSを使い背景画像を指定したいケースがあると思うけど、ブラウザの実装上（特にIE）避けている人が多いかと思います。背景画像を指定する際、画像分の高さ（height）を指定したいところだけどインライン要素にはheightは指定できない（W3Cの仕様です）。なので、paddingを使用し高さを確保します。

ここで問題となるのがIEのバグ。win IE6（標準・互換両モード）はインライン要素にpadding-bottomを指定しても上手く反映されない（top,left,rightは反映される）。つまり、テキスト部分より下側にpadding領域が生成されないため、テキストより大きめの画像を縦中央揃えにすると画像の下側がカットされてしまう。このバグを回避するには2つ方法（他にもあるかもしれないです。）があるので紹介します。

と、その前にサンプルソースをご覧下さい。

/* htmlソース */

<div id="links">
	<span><a href="#">あいうえお</a></span>
	<span><a href="#">かきくけこ</a></span>
	<span><a href="#">さしすせそ</a></span>
</div>

/* CSSソース */ /* icon.gifは29×29pxです。 */

* { margin:0; padding:0; }
#links { margin:50px; padding-bottom:7px; }
#links span { padding:8px 0 7px 35px; background:url(icon.gif) no-repeat 0 0; }
#links span a { font-size:14px; }

上記サンプルがその方法の一つです。HTML自体はいたって単純な物（本来ulを使うべきところですがサンプルということで…）。padding:8px 0 7px 35px;とfont-size:14px;で画像分（上下padding + 文字サイズ = 画像サイズ）のスペースを確保しているわけですが、win IEではこの方法だと下パディングが確保されません。このバグを回避するのがpadding-bottom:7px;の部分。インライン要素を囲う親に下パディングを指定してやります（インライン要素に指定した下パディングと同量もしくはそれ以上）。そうすることでIEでも反映されます。

もう一つは、スペーサー（透明画像）をいれる方法。HTMLサンプルの<div id="links">直下かリストの末尾に入れます。スペーサーには背景画像と同等の高さを指定します（幅は1pxでOK。）。これだけでOK。親要素（#links）には特別指定はいらないです。気をつけるべきところあえて挙げるのであれば、画像とテキストの縦位置でしょうか。vertical-align:top;に指定しておけば問題はず。

ちなみに、win IE5.01にはインライン要素（画像は可）にpadding（上下左右）を適用することができないため、事実上、背景画像は指定できないと思う。