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

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

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

# インライン要素

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

  • 要素の前後に改行が入らない。
  • 必要な幅のみを占有して、横に並ぶ。
    • 左から右に並ぶ。
  • 横幅(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

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

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

# inline-block

  • 横並び。
  • widthheight を設定できる。

# 以下のタグが当てはまる

  • img
  • input
  • textarea

# インライン要素一覧

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

# ブロックレベル要素一覧

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

# 感想

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

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

# 参考