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

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

インライン要素とブロックレベル要素が曖昧だったため、こちらにまとめます

インライン要素とブロックレベル要素の例を以下に示します

  <h1 style="background-color: blue;"><p>テストです</p></h1>  #  ブロックレベル要素の中にブロックレベル要素
  <h1 style="background-color: blue;"><strong>テストです</strong></h1>  #  ブロックレベル要素の中にインライン要素
  <h1><strong style="background-color: blue;">テストです</strong></h1>  #  ブロックレベル要素の中にインライン要素
  <strong style="background-color: blue;">テストです</strong> # インライン要素
  <strong style="background-color: blue;">テストです</strong> # インライン要素

上記の結果が以下になります

Image from Gyazo

上記からも分かるようにブロックレベル要素は、横いっぱいに広がり、次のブロックがある場合は行が変わる
インライン要素は、文字いっぱいにまでの領域で改行されないのでインライン要素を連続すると横に連なる

※ルール
・ブロックレベル要素: ブロックレベル要素の中には、ブロックレベル要素とインライン要素どちらも配置できる
・インライン要素: インライン要素の中には、インライン要素は配置できるが、ブロックレベル要素は配置できない

# OK
<h1><p>テストです</p></h1>
<h1><strong>テストです</strong></h1>

# NG
<strong><p>テストです</p></strong>

参考記事

ブロックレベル要素とインライン要素－HTMLの基本

HTMLタグ/HTML要素一覧 - TAG index

HTML&CSSブロック要素とインライン要素の違いをしっかり知る！！ブロック要素でセンターにする方法も！ - YouTube