hene

hene.dev

インライン要素とブロックレベル要素

インライン要素とブロックレベル要素

今まで、インライン要素 と ブロックレベル要素 を聞いたことはあるけど、 ほとんど理解していなかったので、まとめてみました。

調べると、いろいろまとまってあるサイトがいくつもあったので、 ちゃんと早めに見ておくべきでした。

インライン要素

コンテンツの流れを分断せずに、意味を定義するタグで囲まれた範囲だけを占有するもの。

  • 要素の前後に改行が入らない。
  • 必要な幅のみを占有して、横に並ぶ。
    • 左から右に並ぶ。
  • 横幅(width)や高さ(height)を指定できない。
  • 余白(margin, padding)が効かない。
    • margin の左右の余白は効く。

よく使うインライン要素のタグ

  • span
  • a
  • strong
  • input
  • small
  • br

ブロックレベル要素

タグで囲まれたものを 1 つのブロックとして扱う。

親要素(コンテナー)の領域全体を占有して、ブロック を生成する。

  • 要素の前後に改行が入る。
    • 新しい行から始まる。
  • 横幅いっぱいに広がり、縦に並ぶ。
    • 上から下に並ぶ。
  • 横幅(width)や高さ(height)を指定できる。
  • 余白(margin, padding)が指定できる。

よく使うブロックレベル要素のタグ

  • div
  • p
  • ul
  • li
  • table
  • header
  • footer
  • section
  • form
  • h1 ~ h6

概念上の違い

整形

  • インライン要素: 行内のどこからでも始められる。
  • ブロックレベル要素: 新しい行から始まる。(改行が行われる)

包含モデル

  • インライン要素 は、ブロックレベル要素 を中に置くことはできない。
  • ブロックレベル要素 は、インライン要素 と他の ブロックレベル要素 を含むことができる。

HTML5

ブロックレベル要素 と インライン要素 の区分がより複雑なコンテンツカテゴリの組み合わせに変わった。

HTML5 では、

  • インライン要素 が フレージング・コンテンツ
  • ブロックレベル要素 が フロー・コンテンツ

と呼ばれている。

display

CSS の displayプロパティ を使うことで、要素を変換することができる。

  • inline: インライン要素 に変換する。
  • block: ブロックレベル要素 に変換する。
  • inline-block: インライン要素 と ブロックレベル要素 の特徴を組み合わせたものに変換する。

inline-block

  • 横並び。
  • width や height を設定できる。

以下のタグが当てはまる

  • img
  • input
  • textarea

インライン要素一覧

インライン要素一覧 - HTML: HyperText Markup Language | MDN

ブロックレベル要素一覧

ブロックレベル要素一覧 - HTML: HyperText Markup Language | MDN

感想

margin や padding が効かないときは、displayプロパティ を使って、display: block や display: inline-block を当てたら良いことがわかった。

MDN は、わかりやすくて情報が多かったので、今後フロントで良くわからなかったとき、最初に見ようと思いました。

参考

関連記事

← Back to home