通常、ブロック要素を横並びにしたいときは『float』を使うことが多いと思います。しかしfloatには clearする必要があるIE6ではfloatと同方向のpadding、marginが2倍になってしまう(バグ)高さが異なるボックスがあるとその後のレイアウトが崩れるといった面倒がつきまといますよね。そんな時は『display: inline-block;』の出番です。block要素のように高さや縦方向のpadding、marginが指定できる上に、inline要素のように横並びができ、しかも高さが異なるボックスがあってもレイアウトが崩れません。 それでは実際に『display: inline-block;』を使った例を見てみましょう。 html <div class="ib-box">ボックス1</div> <div class="ib-box">ボックス2</div> <div cla
