HTMLのブロック要素とインライン要素の違い【現役エンジニアが解説】

PROGRAM

今回は、HTMLのブロック要素とインライン要素の違いについて、それぞれに分け、簡単に解説していきます。

ブロック要素

ブロック要素はブロックを生成するため、新しい行から始まります。

divタグやpタグ、formタグ等はブロック要素であり、それぞれ隣り合わない要素です。

<div>Aブロック</div><div>Bブロック</div>

上記のコードのように、ブロック要素を二つ並べた場合は、それぞれ別々の行に表示されます。

インライン要素

インライン要素は段落が変わらないため、テキストの流れを分断しません。

spanタグやimgタグ、inputタグ等はインライン要素であり、それぞれ隣り合う要素です。

<span>A</span><span>B</span>

上記のコードのように、インライン要素を二つ並べた場合は、行は変わらず、続けて表示されます。

インラインブロック要素

インラインブロック要素はインライン要素とブロック要素の両方の特徴を持ちます。

インラインブロック要素はスタイルで指定することができ、要素を隣り合わせることができます。

<div style="display:inline-block;">Aブロック</div><div style="display:inline-block;">Bブロック</div>

上記のコードのように、インラインブロック要素を二つ並べた場合は、ブロック要素でありながら隣り合わせることができ、行は変わらず、連続して表示されます。