はじめに

以下のリンクに画像例を使ってめちゃくちゃわかりやすく書いてある。これをみよう。

ブロックレベル要素とインライン要素の違い
インラインブロック要素の性質と使い方

概要

HTMLコンテンツの振る舞いの一種のこと。
HTMLコンテンツ(divタグやaタグなど)の振る舞い（改行したり、横幅が調整できたり）は主に二つある。

ブロックレベル要素

divタグなど。
入れると必ず前の要素から改行して入るブロックのように振る舞うやつ

インライン要素

spanタグなど。
ブロックのように振る舞わず、前の要素から改行せずに入る。
インライン要素を色付けしても、マーカーのように文字に被せるようになり、width,heightを指定できない。

インラインブロック要素

これら2つの要素の特徴をいい感じに取り入れたのがインラインブロック要素。以下の性質を持つ

• 横幅と高さが指定できる。
• ブロック要素と同じ余白のつき方をする。
• 横幅の初期値が内容で決まる
• 前後の要素とよこに並ぶ（改行が入らない）