inline-block

最近、display:inline-block; を良く使っています。

名前の通り display:inline; と display:block; の性質を持っていて、
指定したタグの内側はblock要素、外側はinline要素になります。

なので、
・ボックスが横並びになる
・vertical-align が使えるようになる
・（上の2つを）height を決めなくても使える
というメリットがあります。

ボックスを横にならべるのは float:left; でも問題ないのですが、
繰り返し並べて自動改行される場合は
height を合わせないとズレてしまうことがあります。


使い方は以下のようになります。
タグが1つ増えてしまうのが欠点でしょうか＾＾；


■CSS

.sample {
width: 200px;
display: -moz-inline-box; /*FireFox2以下用*/
display: inline-block;
/display: inline; /*IE7以下用*/
/zoom: 1; /*IE7以下用*/
}

.sample div{ /*FireFox2以下用*/
width:200px;
display:block;
}


■HTML

<div class="sample"><div>内容</div></div>

いくつかのブラウザに対応させるために
少し記述が多くなりますが、使う価値はあると思います。