display: inline-block

display: inline-block は指定した要素をインラインブロック要素にする

Last update: 2008-09-09

Firefox 3 で 追加された ものの一つだ。なので、ここを Firefox 2.x で表示すると、さっぱりなんのことか分からないだろう。そんな人へは Firefox 3 へのアップグレードをお勧めしておきます。
でですね、これが対応と聞いて、おお！すごいぞと思ったものの、これは今まで使ったことが無かったので、このパートは本当の実験。

インラインブロック要素を簡単に説明すると、インライン要素でありながら width (幅) と height (高さ) をもつ要素のことで、img や input が代表的なもの。ブロック要素的な性質を持ってはいるが、ブロック要素のように前後に改行を伴わないため、inline (行内) で扱われる他のインライン要素と同じ使い方となる。
display 要素の inline-block は、inline (行内) に存在するインライン要素 (strong とか span) をブロック要素的に扱うことができるプロパティ値ということ。ただし、これは本当のブロック要素として扱うわけではなく、レンダリング上の効果を目的にしているので、例えば span に inline-block を与えても div になるわけではない。
と、拙い文章で書くよりもサンプルをみた方が早いと思うので、p 要素内に置いた strong 要素がどう変化するかを実験する。

display プロパティの無しと block と inline-block でのレンダリング結果を実験

テストは通常のインライン要素としての strong、インラインブロック要素の strong、インラインブロック要素の strong のレンダリング結果を見比べる。それぞれに背景色とテキストカラーを設定している。サンプルテキストの出典は Mozilla Developer Center CSS:display からなので、本来 blockquote を使うべきだろうが、レイアウト上の理由ということで補足として記載しておきます。
ということで、HTML はこれ。

<p>Introduced in  <strong>css 2.1</strong>. This causes the element to generate a block element box that will be flowed with surrounding content as if it were an single inline box (behaving much like a replaced element would.)</p>

strong にはブロックボックスに適用できる margin, padding, width, height, border と、ブロック要素用の text-align: center を設定して、基本 CSS としたものがこれ。

strong {
 text-align: center;
 display: block;
 color: #f8f8ff;
 background-color: #6a5acd;
 margin: 1.2em;
 padding: 0.6em;
 width: 120px;
 height: 24px;
 border-bottom: solid 2px #000066;
 border-right: solid 2px #cc99ff;
}
example box model

この CSS で期待するレンダリング結果は以下の通り。
テキストのセンター揃え「css 2.1」を強調表示margin 値 1.2em で上下左右に生成されるマージン領域padding 値 0.6em で上下左右に生成される余白右と下に 1px のボーダーボックスのサイズを 120px×24px で生成

テスト1：strong 要素に display を設定していない

Introduced in css 2.1. This causes the element to generate a block element box that will be flowed with surrounding content as if it were an single inline box (behaving much like a replaced element would.)

rendering example

センター揃えは無効強調表示は有効margin は左右のみ有効padding は有効ボーダーは有効ボックスのサイズは無効

CSS の仕様通り、インライン要素のデフォルトでは width と height は無効、上下の margin も無視されている。ここでは分かり難いがテキストのセンター揃えも無効だ。
面白いのは padding で設定した余白が、親要素の領域を越えて有効になっている。インライン要素としては上下の padding を無視して親要素に従う方が良いように思うのだが、ボーダーとの兼ね合いもあるので難しいところか。
だが、これはこれで使い勝手がありそうな予感もする。

テスト2：strong 要素に display: block を指定

基本 CSS に display: block を付け加える。

Introduced in css 2.1. This causes the element to generate a block element box that will be flowed with surrounding content as if it were an single inline box (behaving much like a replaced element would.)

rendering example

display: block を指定しているので、期待通り strong 要素をブロックレベルとしてレンダリングしている。なので strong で囲った「css 2.1」は前後で改行され、独立した行となっている。
strong 要素に設定したプロパティは全て有効で、テキストのセンター揃えも有効になっていることが分かるだろう。
余談ながら、この設定では「css 2.1」の後のピリオドが行頭に送られるのは考えもの。かといって css 2.1 に含めるのも、消すのもどうかなという辺りにジレンマ。

テスト3：strong 要素に display: inline-block を指定

基本 CSS に display: inline-block を付け加える。

Introduced in css 2.1. This causes the element to generate a block element box that will be flowed with surrounding content as if it were an single inline box (behaving much like a replaced element would.)

rendering example

display: inline-block は仕様通り、ブロック要素から前後の改行を無効にしてレンダリングしている。
で、インラインブロックの仕様も有効なので、行内で strong に設定した strong の上下マージンが影響を与えるため、強制改行されない行の行高が高くなっている。
テキスト以外のオブジェを inline-block に指定することが有るのかどうかを思いつかないが、その場合は「vertical-align」で意図的な指示を与えなくてはいけないかもしれない。

その他のテスト

ブロック要素の div を使ったテストをやってみようと思って、ここに書いていたが、builder by ZDNet Japan ですでに取り上げられていた。メッチャ 悔しい のでそのページをリンクさせてもらう。Firefox 3が対応したdisplayプロパティの値（1

▲ Return to Top