ブロック要素とインライン要素の間の役割を持つインラインブロック要素を知っていますか。
今回はインラインブロック要素の特徴から、この特殊な要素の使い所について詳しく解説していきます。
インラインブロック要素を理解する上で、ブロック要素とインライン要素の理解は必要不可欠です。
ブロック要素、インライン要素については下記の記事でそれぞれ詳しく解説していますので、参考にしてみてください。
それではインラインブロック要素について解説していきます。
Contents
特徴1：インラインブロック要素は横に並ぶ
インラインブロック要素はインライン要素と同じく、横に並びます。
インラインブロック要素という言葉で、インライン要素のように横に並ぶのか、ブロック要素のように縦に並ぶのか、混乱してしまうかもしれませんが、横に並んでいきます。
これだけ聞くと、インライン要素と何が違うのかと思う方もいるかもしれませんが、ここからインライン要素とは違う特徴について解説していきます。
特徴2：幅(width)、高さ(height)が指定できる
先ほど、インラインブロック要素はインライン要素と同じように横に並ぶと解説しましたが、インラインブロック要素は幅(width)、高さ(height)を指定することができます。
これについてはインライン要素ではなく、ブロック要素の特徴を持っているということになります。
幅(width)、高さ(height)が指定できるという点はインライン要素と大きく違う点と言えます。
特徴3：余白(padding、margin)を指定できる
インラインブロック要素は幅(width)、高さ(height)が指定できるだけでなく、余白(padding、margin)についても指定することができます。
インライン要素では余白(padding、margin)は指定できないため、ここについてもブロック要素の特徴を持っているということになります。
デフォルトの余白(padding、margin)はブロック要素の場合と同じように付きます。
特徴4：中央寄せしたい場合、親要素に『text-align: center;』を指定する
インラインブロック要素を中央寄せしたい場合、インラインブロック要素に『text-align: center;』を指定しても中央寄せはされません。
中央に配置したい時には中央寄せしたいインラインブロック要素の親要素に『text-align: center;』を指定する必要があります。
普通に中央寄せすることはできないため、インラインブロック要素を中央寄せする際には親要素に注目しましょう。
特徴5：『display: inline-block;』でインラインブロック要素に変更できる
インラインブロック要素以外の要素にCSSで『display: inline-block;』を指定することでインラインブロック要素に変更することができます。
これまで解説したように要素を横に並べたいが、幅(width)や高さ(height)、余白(padding、margin)は指定したい場合、インライン要素でもブロック要素でも対応することはできません。
そのような時はCSSで『display: inline-block;』を指定することで、インライン要素とブロック要素の特徴を同時に活かすことができるようなります。
今回はインライン要素とブロック要素の中間の要素であるインラインブロック要素の特徴について解説していきました。
インライン要素でもブロック要素でも対応できない場合にはインラインブロック要素で対応できないか考えてみましょう。
