HTMLの要素は「ブロックレベル要素」と「インラインレベル要素」にわけられます。
「ブロックレベル要素」
文章の骨組みとなる要素です。
「＜h1＞、＜h2＞、＜p＞、＜ul＞、＜li＞、＜table＞…..etc」
「インラインレベル要素」
ブロックレベルの中身として扱われる要素です。
「＜a＞、＜span＞、＜strong＞…..etc」
ちなみに上記の説明の通り、要素にはこのような決まりごとがあります。
・「ブロックレベル要素」の中に「インラインレベル要素」は◯
・「インラインレベル要素」の中に「ブロックレベル要素」は✖️
本題ですが、要素を横並びにする時にinlineとinline-blockの違いがいまいちよくわからなかったため、実際に使った時のことを含め書きます。
「display:inline」
・インラインボックスとして扱う
・横並びにはなるが、高さや横幅の指定、上下のmarginの設定ができない
・左右のmarginは指定することは可能で、高さや横幅はインラインの要素に依存する
「display:inline-block」
・インラインレベルのブロックコンテナとして扱う
・横並びになる。高さ、横幅、marginの指定が可能
・中身の要素が大きかったり、長かったりする場合はうまく横並びにならない
要素を並べる方法はdisplay以外にも「float」を使用する方法もあります。
また、最近推奨されているのはCSS3で追加されたFlexboxの機能などもあります。
