インライン要素とブロック要素
「インライン要素」と「ブロック要素」はHTMLの話をする上で必ず出てくるワードですね。
が、これは死語です。（どーん）
何年も前から死語です。（どどーん）
でもなぜ今でも使われるのかというと、根底にその考え方が残っているからです。
- ブロック要素のあとには改行が入る
- デフォルトwidth→100%（つまり親の幅いっぱい）
- デフォルトheight→auto（つまり子要素/コンテンツがギリ収まる可変サイズ）
- インライン要素を入れ子にできる ←この概念が新しい考え方に生まれ変わった
- インライン要素のあとに改行は入らない。そのまま横に続く。
- widthとheightの概念が無い（行内の要素なので、行送りとかになると高さとか幅とか無い）
- つまりwidthとheightの指定ができない（場合によってはブラウザの優しさで効く）
- ブロック要素を入れ子にできない ←この概念が新しい考え方に生まれ変わった
「何タグが何タグを囲める」という考え方は、昔は
インライン要素 ＜ ブロック要素
という単純な構図だったのですが、今はタグをカテゴリに分けて、そのカテゴリごとに「〇〇カテゴリは△△カテゴリを囲める」みたいな相関図になってます。ややこしいことに、1つのタグで複数のカテゴリに属するものが多くあります。兼部ですね。
暗記しようとすると複雑ですが、それぞれのカテゴリの用途などを考えると腑に落ちると思います。
そのカテゴリ分けをコンテンツモデルとか言います。実務でこんな言葉は使わないので覚えなくていいですが、ググるときのために覚えておくと便利です。
参考：【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ
CSSでかんたんに切り替えられる
「このタグはブロック要素です！」という言い方はもうしないのですが、入れ子ルール以外の性質は生きているわけです。そしてこれはCSSで切り替えることができます。
ブロック性質以外の要素にdisplay : block を指定すると、改行が入り、幅がびよーんと100%に伸び、幅と高さを指定できるようになります。display : blockは、imgタグにブロック性質を与えるためや、aタグをボタンっぽく見せるときなんかによく使いますね。
imgタグはインライン性質だが、なぜかwidthとheightがデフォルトで効くようになっている。見た目がブロックっぽいもんね。また、aタグは特殊なので、display : blockしなくても幅と高さを指定できる場合が多い（これは親による）。
inline-blockとは？
これもCSSでよくでてきますね。display : inline-block。もともとHTMLタグがこの性質を持っていることはありません。これは、CSSでだけ生まれる、ブロックとインラインのいいとこ取り性質です。
- インラインブロックのあとには改行が入らない（横並び）
- デフォルトwidth→auto（つまり子要素/コンテンツがギリ収まる可変サイズ）
- デフォルトheight→auto（つまり子要素/コンテンツがギリ収まる可変サイズ）
- widthとheightを指定できる
- 入れ子の概念はコンテンツモデルに基づく
どういうときに便利なのかというと。
See the Pen
XWNMKyr by おの れいこ (@reico)
on CodePen.
- インラインなのでline-height（行高）が効く！
- ブロックなので幅・高さを揃えることもできる！
- インラインなので勝手に行送りしてくれる！（flexは指定しないと行送りしない）
