ボックスの種類
ブロック・インライン・インラインブロック
HTMLの要素は、表示のされ方によって「ブロックボックス」「インラインボックス」「インラインブロックボックス」の3種類に分けて考えられます。横幅・高さの扱いと、横に並ぶかどうかが違います。
サンプルコード
実行結果
解説
ブロックボックス（ブロック要素）は、親要素の横幅いっぱいに広がります。初期状態では、下に書いたコンテンツが横に割り込むことはなく、width などで幅を決めても、空いた隙間にコンテンツが滑り込むことはありません。普段使うタグのほとんどはブロックボックスと考えてOKです。
インラインボックス（インライン要素）は、横幅や高さが包んでいる中身の分しかありません（＝width・height を設定できない）。ブロック要素の中で文章の一部として登場することが多いですが、単独でも使えます。何も指定がなければ、横幅に余裕があるだけ横に並び、空いているスペースに入り込もうとします。
インラインブロックボックス（インラインブロック要素）は、ブロックとインライン両方の性質を併せ持ちます。幅と高さを設定でき、指定がなければ要素自体が本来持っている幅と高さで表示されます。前の要素がインラインやインラインブロックのときは、空いている部分に入り込もうとします（横に並びます）。画像を挿入する img タグや、Googleマップで使う iframe タグがこれにあたります。
どの種類にするかは CSS の display で変更できます。ブロックボックスにするなら display: block;、インラインボックスなら display: inline;、インラインブロックボックスなら display: inline-block; と書きます。
応用例・注意点
3種類の比較
| 種類 | 説明 |
|---|---|
ブロック（block） | 横幅いっぱいに広がり縦に積まれる。幅・高さを指定できる。例：div, p, h1〜h6, ul |
インライン（inline） | 中身の分の大きさで横に並ぶ。幅・高さは指定できない。例：a, span, strong, i, em, b, br, time, u |
インラインブロック（inline-block） | 横に並びつつ、幅・高さを指定できる。例：img, iframe |
リンクをボタンのような大きさにする
a はインラインなので width・height が効きません。display: inline-block にすると、横に並んだまま大きさを指定できます。
画像の下にできる隙間を消す
img はインラインブロックとして文字と同じ行に置かれるため、下に少し隙間ができます。display: block にすると消えます。
注意点
- 01厳密には、HTML Living Standard では「ブロック要素」「インライン要素」という分類はもう存在しません。ただし、CSS でレイアウトするときは実質同じ働きをするので、この3種類で考えると理解しやすくなります。
- 02インライン要素には上下の margin も効きません。余白を付けたいときは inline-block か block に変更します。