今でも必須の知識。CSSの display: inline; と display: block;の違い

現在のHTMLの仕様であるHTML Living Standardには「インライン要素」「ブロック要素」というのは存在しません。ただ、HTMLとCSSでレイアウトをする上で未だにこれらの言葉はよく出てきます。実はこの文脈で使われている「インライン要素」「ブロック要素」というのは、CSSのdisplay: inline;とdisplay: block;という事なんですね😅

この記事では、HTMLをレイアウトする時に見た目をスタイリングするためのdisplay: inline;とdisplay: block;について簡潔に説明していきます。

【重要】CSSのdisplayの値は自由に変更可能！

まず前提のお話なのですが、HTMLの各要素にはdisplayのデフォルト値というのが設定されています。例えば<div>ならdisplay: block;、spanならdisplay: inline;とか。ただこれはあくまでもデフォルト値というだけであって、自由に変える事ができます。spanをdisplay: block;にしたって良いんです。むしろここの値を変更しないとうまくレイアウトできないので、積極的に変更する必要があります。

冒頭にも書いた通り、今は「インライン要素」「ブロック要素」というのは存在せず、インラインとかブロックというのは見た目をつかさどるためのCSSのプロパティでしかないので、混乱しないように注意してください。

※HTMLの要素については「インライン要素」「ブロック要素」に代わり、「フローコンテンツ」や「記述コンテンツ」といった新たなカテゴリーができています。

コンテンツカテゴリー – HTML: ハイパーテキストマークアップ言語 | MDN

CSSの display: block;

まずは基本中の基本であるdisplay: block;から。

display: block;が設定された要素は横幅いっぱいの幅を持ちます。また、ブロックという名からもイメージできる通り、要素同士は上に積み上がります。

• display: block; が設定された要素は、新しい行で始まり、利用可能な全幅を占めます。
• 通常、段落やリストなどの要素に適用されます。例えば、<div>、<p>、<ul>などが該当します。
• width や height の指定が可能で、外側の marginや内側のpaddingも適用できます。

どういう事かと言うと、実際にdisplay: block;に指定された要素を並べてみるとこの様になります。

See the Pen インライン要素とブロック要素 by yusuke1110 (@yusuke1110) on CodePen.

各要素は横幅いっぱいになっていて、縦に積み上がっていることがわかりますね。それだけです。

CSSの display: inline;

次はこちらも基本となるdisplay: inline;。

display: inline;が指定された要素は他の要素の横に並んで表示されます。

• 通常、文字や画像など、文の流れに沿って配置される要素に適用されます。
• 例えば、<span>、<a>、<strong> などが該当します。
• これらの要素は、基本的に width や height を指定することはできません。
• margin や padding は左右に適用されますが、上下には効果が限定的です。

実際にdisplay: inline;に指定された要素を並べてみるとこの様になります。

See the Pen インラインレベルとブロックレベル by yusuke1110 (@yusuke1110) on CodePen.

widthや上下のmargin設定が反映されていないことに着目してください。そして行が折り返されるとpaddingで設定された箇所が重なってしまっています。

これが上で「上下には効果が限定的です」と書いた点で、display: inline;に指定された要素は高さを持たず、他の要素に対して影響を与えません。回りくどい言い方になってしまいましたが、マージンが反映されなかったり、重なったりしちゃう事がある、という事です。

CSSの display: inline-block;

display: block; display: inline;と来たので、display: inline-block;についても説明します。これは、レイアウトとしてはdisplay: inline;と同じく横に並んで表示されるのですが、display: block;のようにwidthやheightを指定できます。

先ほどのdisplay: inline;のコードをそのままdisplay: inline-block;に変えてみるとこの様になります。

See the Pen インラインレベルとブロックレベルの例3 by yusuke1110 (@yusuke1110) on CodePen.

先ほどは反映されなかったwidthやmarginが反映されました。

全部inline-blockで良いのでは？

ここまで読むと、意図せず重なっちゃったりするinlineより、inline-blockの方が良くない？と思った方もいると思います。

確かに一理あります。実際わざわざdisplay: inline;と指定する事ってあまり無くて、HTML要素が持っているデフォルト値を変更するのはinline以外のものが多いです。ただなんでもかんでもinline-blockにすれば良いかというと、そんなことは無くて、意図的に高さを持たせたく無い場合もあるハズです。

なので、レイアウト上なにかうまくいかない事があったらまずはこのdisplay値を疑ってみる、というのが良いと思います。

まとめ

今回ご紹介したblock inline inline-block、ひとまずこの3つが分かればOKです。他にも色々とdisplay値はありますが、あとはこの3つの応用でなんとなくイメージができてくるハズです。このプロパティを適切に使用して、柔軟なレイアウトを実現しましょう😄