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