概念から考えるブロックレベル要素とインライン要素の違い

「ブロックレベル要素とインライン要素ってどう違うの？」 ということを聞かれた時、 ブロックレベル要素は親要素の横幅いっぱいに広がって改行が入る。他の要素を中に入れられる。高さや幅を自由に変更できる。 インライン要素は、改行が入らない。他の要素は中に入らない。高さや幅は要素の長さ次第で、変更はできない。 というような答え方をしたら、 「それは本質的じゃない。もっと概念から考えるといいよ」 とアドバイスをもらいました。 それから、本質ってなんやねん？と思いながら色んなサイトを巡って考え、 自分の言葉にできた時に、初めてこの二つの要素を理解できた気がしたので、自分なりの考え方をまとめてみました。 対象 HTMLやってるけどブロックとインラインがうまく理解できない初学者 ブロックとインラインについて、自分なりにしっくりくる説明が見つかっていない人 参考サイト 私は以下のサイトでブロックレベル要素とインライン要素を理解しました。 すごくわかりやすいです。ここで理解できればここから下はスクロール不要です。 MDN：ブロックレベル要素 MDN：インライン要素 WebMedia：【基礎知識】ブロックレベル要素・インライン要素の性質と違い ブロックレベル要素・インライン要素とは 私はブロックレベル要素とインライン要素を以下のように考えています。 ブロックレベル要素 ブロックレベル要素は、他の要素を格納するための大きな箱。 インライン要素 インライン要素は、箱の中で機能する小さな部品。 なぜブロックレベル要素は箱なのか ブロックレベル要素の役割は、他の要素を格納することです。 家で例えればタンスや本棚といったところでしょうか。 これらの箱には明確な役割があります。 タンスには服を。本棚には本を。 その辺りが雑になると汚い部屋になるのはイメージしやすいと思います。 HTMLも同じです。 bodyやarticle、tableなど、ブロックレベル要素にも様々な種類がありますが、 その箱の役割に合わせて、適切に他の要素を格納することで、コンテンツにまとまりが生まれ、綺麗に整理されたWebページを作ることができます。 なぜインライン要素は部品なのか 一方、インライン要素はそれ自体が機能を持った単体の部品です。 家の例で言えば前述した服や本、時計やペンなどが該当しそうです。 箱であるブロックレベル要素の中で、その箱の持つ役割に合わせて配置することで、Webページを装飾したり、様々な機能を加えることができます。 ブロックレベル要素とインライン要素の違いはどこから生まれる？ ボックスレベル要素 = 箱 インライン要素 = 部品 として考えると、冒頭の機能の違いが生まれる理由について、しっくりくるんじゃないかと思います。 ブロックレベル要素 箱だから他の要素を格納できる。 箱の内外を区別しているため前後には改行が入る。 他の要素を格納するため、高さや幅を自由に設定できる必要がある。 インライン要素 単体の部品だから他の要素は格納できない。 単体の部品のため改行が入らない。だから他の部品（インライン要素）と横並びにできる。 それ自体で完結しているため、高さや幅は決まっている。 最後に 自分自身が初学者なので、本当に伝わるのかいまいちピンと来ませんが、誰かの役に立てば嬉しいです。 インライン要素の「部品」という言い方について、もっとうまい言い回しはないかなーと思いながらここまで書きました。うまい表現があればぜひ教えてください。 備考 HTML5では「ブロックレベル要素」「インライン要素」という区分はなくなり、「コンテンツカテゴリー」という分類になっているようです。それぞれの分類の中で、ブロック要素にあたるもの・インライン要素にあたるもの、があるようです。