今日はブロック要素とインライン要素について説明します。

ブロック要素とは

ブロック要素とは「行の全体のまとまり」です。開始タグと終了タグで囲った個所は行全体が一つのブロックとして扱われるため、範囲が横に広がりません。コンテンツをまとめる箱のような使い方をする要素です。

インライン要素とは

インライン要素はインラインという名前の通り「ラインの中」、行の中の一部のまとまりを定義しています。インラインは指定した範囲のみがグループ化されます。基本的にブロック要素の中で使用され、ブロック要素の内容に効果をもたらす要素が多く含まれています。

ブロック要素とインライン要素の違い

グループ化される単位が違う

ブロック要素→行単位のグループ

インライン要素→行の中の一部のグループ

例: 「これはフランスパンです。」という文章だったらブロック要素では「これはフランスパンです。」という一文すべてがグループ化されますが、インライン要素では「フランスパン」という部分のみが選択されるということです。

高さと幅横の変更

ブロック要素→高さと横幅の変更ができる

インライン要素→高さと横幅の変更はできない。高さと横はコンテンツによって決まる

改行について

ブロック要素→自動で改行が行われる

インライン要素→自動で改行は行われない