float:left; で横並びにしようとしたとき、各要素の高さが違うと

このようになってしまいます。
カッコ悪いですよね…。というよりデザイン通りになっていません。

display:inline-block; を使うと、

このようになります。素晴らしい！エクセレント！
display:inline-block; には、text-align および vertical-align が指定できるので、今まで面倒だったレイアウトが簡単に実装できるようになります。

と、そう簡単にはいきません

記述もシンプルになるし、変な崩れも起こらないし、完璧だー！なんていうふうに特に何も考えずにコーディングすると、IE6、IE7以外で隙間が生まれてしまいます。

先に出した成功例は、以下に示す解決法を実践したものだったのです…。
何も対応をしなかった場合、IE6、IE7以外ではこのようになってしまいます。

今回基準となるコードは以下。
CSS

ul{
}
li{
	width:100px;
	vertical-align:top;
	display:inline-block;
	/display:inline;
	/zoom: 1;
}

HTML

<ul>
	<li>inline-blockのサンプル1</li>
	<li>inline-blockのサンプル2</li>
	<li>inline-blockのサンプル3</li>
	<li>inline-blockのサンプル4</li>
</ul>

この隙間の原因は改行。
試しに改行を消してみるときれいに隙間が埋まります。

解決法は大きく分けて2つ。
HTMLで直すか、CSSで直すかです。

解決法1: HTML側で直す

解決法1-1:改行を削除

そのままですね。
改行コードが原因なので、改行を削除してしまえば隙間が埋まります。

<ul>
	<li>inline-blockのサンプル1</li><li>inline-blockのサンプル2</li><li>inline-blockのサンプル3</li><li>inline-blockのサンプル4</li>
</ul>

問題は、横並び要素を1行にまとめて書くので、ソースの可読性が低下する可能性が高いこと。

解決法1-2: コメントアウトを使う

よくある解決法ですね。

<ul><!--
	--><li>inline-blockのサンプル1</li><!--
	--><li>inline-blockのサンプル2</li><!--
	--><li>inline-blockのサンプル3</li><!--
	--><li>inline-blockのサンプル4</li><!--
--></ul>

こんなふうに改行部分をコメントアウトすれば、改行コードを隠すことができます。
解決法1-1のように可読性は落ちることはないです。

解決法1-3: 改行部分を変える

こちらもよくある解決法。

<ul
	><li>inline-blockのサンプル1</li
	><li>inline-blockのサンプル2</li
	><li>inline-blockのサンプル3</li
	><li>inline-blockのサンプル4</li
></ul>

このように改行位置を本来の位置からずらすことで、li間で改行をしてないことにする方法です。
こちらも解決法1-1のように可読性は落ちることはないです。

解決法2: CSS側で直す

解決法2-1: letter-spacing で調整

inline-blockを指定している要素とその親要素に以下の指定を加えるだけ。

ul{
	letter-spacing:-.40em;
}
li{
	letter-spacing:normal;
}

解決法2-2: font-size で調整

ul{
	font-size:0;
}
li{
	font-size:16px;
	width:100px;
	vertical-align:top;
	display:inline-block;
	/display:inline;
	/zoom: 1;
}

font-sizeをピクセルで指定しているので、IEで文字の拡大縮小ができません。
IE7以降はページのズーム機能がついているので問題ないとは思いますが…。

最終結果

個人的には解決法2-1のサンプルが一番使いやすいなと思っています。
基準にしたCSSと組み合わせると、以下のようになります。

ul{
	letter-spacing:-.40em;
}
li{
	letter-spacing:normal;
	width:100px;
	vertical-align:top;
	display:inline-block;
	/display:inline;
	/zoom: 1;
}

記述はシンプルだし、横幅を変更するだけで流用できるので汎用性が高いと思います。
解決法2-2でもいいのですが、修正箇所が解決法2-1に比べて1箇所増えるので次点としました。
IEでの文字の拡大縮小がちょっと気になりますしね。

CSSで修正したほうがスマートな方法かと思いますが、CSSをいじれない場合もあるかもしれません。
そういった場合には、HTMLをちゃちゃっといじっちゃってもオッケーだと思います。そこら辺は臨機応変に。

Firefox 2 について

inline-block 系の記事では、Firefox 2 用に display:-moz-inline-box; という指定がされているものが多いですが、Firefox 2 は、2008 年末で開発とサポートを終了しており、もう対象ブラウザからはずしちゃってもいいかなーと思っています。
アップグレードできないなら他のブラウザ使ってねーとMozilla も言ってますし（参考ページ： 次世代ブラウザ Firefox – 旧バージョンのダウンロード の下方）。

というわけで、Firefox 2 用の指定は削除してあります。
そのため、Firefox 2 で見ると崩れているかと思います（display:inline-block; に対応していないため）。

もしFirefox 2 にも対応させたい場合は、ヨモツネットさんが公開してくれているスライドを参考にしてください。
参考ページ： 書籍などに紹介されていない display : inline-block について （ヨモツネット）

関連投稿

• cssでグラフを描く
  category: css tags: css.
• デフォルトスタイルのリセット
  category: css tags: css+tips.
• table に指定しておきたい CSS メモ
  category: css tags: css+tips.

The EqualHeights jQuery Plugin
demo

jQueryとjquery.equalheights.jsを読み込み

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.equalheights.js" type="text/javascript"></script>

tr
下記のように要素の高さを揃えたい箇所を指定すれば、内要素が異なる高さを持つ要素の高さを揃えられます。

$(document).ready(function() {
    $(".columns").equalHeights(100,300);
});

上記の記述では、columnというクラス名がついた要素に対して高さを揃えます。
.equalHeights(100,300)の部分でmin-heightとmax-heightを指定できます。値としてautoも使えるみたいです（作者デモはautoを使っている）。300pxを超えたらスクロールバーが出てきます。

既知のバグとして、要素内に画像を含み、その画像にheightの指定がない場合、IEで正確に高さが計算できないことがあるそうです。その場合、スクリプトが高さをゼロとみなしてしまうようです。

また、いくつかのブラウザでリサイズ時にもう一度スクリプトを読まないといけない場合があるらしく、その場合は下記のようなスクリプトを書いてね、とのこと。

$(".columns").resize(function(){
     $(".columns").equalHeights();
});

ここまで書いておいて言うのもなんだが、こういうjQueryでやるのも楽だけど、ヨモツネットさんの記事（書籍などに紹介されていない display : inline-block について）のほうがjavascriptに依存しないし、好きだな。

jQueryをガシガシ使いたい人は使ってみてください。

関連投稿

• タイル状にアニメーションして画像を切り替えるjQueryプラグイン jFancyTile
  category: jQuery > javascript tags: javascript+jQuery.
• IE6 で透過 PNG を使えるようにする javascript
  category: javascript tags: IE6+javascript+透過PNG.
• キャラクターと背景が動きまくるjQueryプラグイン（おまけつき） jQuery.spritely
  category: jQuery > javascript tags: javascript+jQuery.