Firefox 3が対応したdisplayプロパティの値（1）

に対して「display: inline-block」と指定すると、「display: inline」と指定した場合と同じ表示になる。ここでは、inline-blockボックスを水色、inlineボックスを黄緑色で表示している。

Firefox 3の表示

div.inlineblock{
display: inline-block;
background-color: #00aaff;
}

div.inline{
display: inline;
background-color: #aaff00;
}

Inline-Block
Inline-Block



Inline
Inline

※ブラウザで表示を確認する

　inline-blockとinlineボックスの違いは、widthやheightプロパティを適用するとはっきりする。widthとheightは横幅と高さを指定するプロパティで、blockボックスにだけ適用することが認められている。そのため、次のようにwidthプロパティを指定すると、inline-blockボックスは指定した横幅で表示されるが、inlineボックスの横幅は変化しない。

ボックスの横幅を300ピクセルに指定したもの

div.inlineblock{
display: inline-block;
background-color: #00aaff;
width: 300px;
}

div.inline{
display: inline;
background-color: #aaff00;
width: 300px;
}

※ブラウザで表示を確認する

　SafariやOpera、Internet Explorer 8（ベータ版）での表示を確認すると、inline-blockボックスの表示に対応していることがわかる。

Safariの表示

Operaの表示

Internet Explorer 8の表示

　なお、blockボックスを横に並べて表示しようとした場合、floatやpositionプロパティを利用する必要があり、どうしてもスタイルシートの設定が複雑になる。しかし、inline-blockボックスを利用すれば、floatやpositionを利用せずに段組みなどのレイアウトを作成できるようになる。

　次回は、inline-blockボックスを利用した段組みの細かな設定方法などを紹介する。