CSS: block, inline, inline-block の違い

displayプロパティに設定する値として 「block」「inline」「inline-block」があります。

「block」と「inline」の区別はつきやすいのですが、 「block」と「inline-block」、又は「inline」と「inline-block」 の違いがわかりにくいと思います。

このページでは、少しずつ値を変化させることで、 この3つにどのような違いかあるのかを見ていきます。

検証用のリストを作成

「blcock」用のリスト、「inline」用のリスト、「inline-block」用のリストをそれぞれ作ります。 HTMLは以下の通りです。


<ul class="sample1">
    <li>block</li>
    <li>block</li>
    <li>block</li>
</ul>

<ul class="sample2">
    <li>inline</li>
    <li>inline</li>
    <li>inline</li>
</ul>

<ul class="sample3">
    <li>inline-block</li>
    <li>inline-block</li>
    <li>inline-block</li>
</ul>

リストのli要素に対して、それぞれ「display: block」、「display: inline」、「display: inline-block」 を指定します。 見やすくなるように、すべてのli要素に対して赤線を設定します。「border: 1px solid red;」。 CSSは以下の通りです。


<style>
    /* 共通設定 */
    .sample1>li, .sample2>li, .sample3>li {
        border: 1px solid red;
    }

    .sample1>li{
        display: block;
    }
    .sample2>li{
        display: inline;
    }
    .sample3>li{
        display: inline-block;
    }
</style>

表示結果

上記のHTML、CSSの表示結果は次のようになります。

上の表示結果を見る限り、「block」と「inline」の違いは、縦並びと横並びでわかりやすいのですが、 「inline」と「inline-block」の違いがわかりません。 両方ともインラインボックスとして表示されているように見えます。他のプロパティも指定してみましょう。

width と height を指定してみる

ここで試しに、すべての li 要素に対してwidth と height を指定してみます。 「inline-block」がどうなるのかに注目です。


/* 共通設定 */
.sample1>li, .sample2>li, .sample3>li {
    border: 1px solid red;
    width: 120px;
    height: 50px;
}

表示結果

width と height を追加指定した結果は次のようになります。

「block」と「inline-block」に対してwidth と heightが適用されています。 「inline」には適用されていません。

他にもプロパティを追加してみましょう。

padding と margin を指定してみる

次は padding と margin を指定してみます。


/* 共通設定 */
.sample1>li, .sample2>li, .sample3>li {
    border: 1px solid red;
    width: 120px;
    height: 50px;
    padding: 5px;
    margin: 5px;
}

表示結果

padding と margin を追加指定した結果は次のようになります。

「block」、「inline」、「inline-block」全てに対して padding、margin が適用されています。

そもそも padding, margin はすべての要素に対して適用されるので当然と言えば当然です。

「block」と「inline-block」の文字を真ん中に表示させる。

現在の所、「block」と「inline-block」の文字はボックスの上側に表示されています。 文字を真ん中(縦方向)に表示するには、どのプロパティを指定すればいいのでしょうか?

ブロックボックスで考えた場合は line-height プロパティです。
インラインボックスで考えた場合は vartical-align プロパティです.

まずは line-height プロパティを指定してみます。
(padding と margin は外します。)


/* 共通設定 */
.sample1>li, .sample2>li, .sample3>li {
    border: 1px solid red;
    width: 120px;
    height: 50px;
    line-height: 50px;
}

表示結果

「line-height: 50px;」を追加した結果は次のようになります。

「block」と「inline-block」の両方とも中央(縦方向)に表示されています。

では、line-height の変わりに vertical-align プロパティを指定してみるとどうでしょうか?


/* 共通設定 */
.sample1>li, .sample2>li, .sample3>li {
    border: 1px solid red;
    width: 120px;
    height: 50px;
    vertical-align: middle;
}

表示結果

「vertical-align: middle;」を追加した結果は次のようになります。

どちらもうまく中央(縦方向)に表示されていません。 「block」がダメなのは当然として、「inline-block」も中央(縦方向)に表示されていません。

つまり、「inline-block」の文字を中央(縦方向)に表示したい場合は、 「vertical-align」ではなく、「line-height」を指定すれば良い、ということです。

まとめ

「inline-block」は、インラインボックスのように横並びに表示されるますが、 width や height のようなブロックボックスに適用されるプロパティが使用できます。 padding や margin も使用できます。

「inline-block」と言うとおり、「inline」と「block」の両方の要素を兼ね備えているといえます。

HTML・CSS入門