インライン要素&ブロック要素
インライン要素&ブロック要素
.
インライン要素
  • <span> <a> <img> ... タグ
  • 前後に改行が入らない
インライン要素の範囲(背景が緑の部分)文字の部分だけ

<span style="background:lightgreen;">
文字
</span>
			
ブロック要素
  • <div> <table> <blockquote> ... タグ
  • 前後に改行が入る
ブロック要素の範囲(背景が緑の部分) ⇒ 一行以上ライン全体
<div style="background:lightgreen;">
文字
文字
.
.
</div>
インライン要素とブロック要素の包含関係
ブロック要素の中にインライン要素を含むことはできるが
インライン要素の中にブロック要素を含むことはできない
ピンク部分ブロック要素
インライン要素インライン要素
グリーン部分ブロック要素
<a> タグ(インライン要素)の中にブロック要素を含むことはできないが
<a href="URL" style="display:block;"> ブロック要素として扱うことで可能
文字の背景
インライン要素の範囲文字の部分だけ

<span>タグ
<span style="background:lightgreen;">
文字
</span>


<span style="color:green;font-size:12pt;font-style:italic;
font-weight:bold;text-decoration:underline;background:lightgreen;"> 文字の背景色ライトグリーン<br> アンダーライン<br> 太字<br> 斜め文字<br> サイズ普通<br> 緑の文字で<br> </span>
ブロック要素の範囲 ⇒ 一行以上ライン全体
<div>タグ <div style="background:lightgreen;">
文字
文字
.
.
</div> <div style="color:green;font-size:12pt;font-style:italic;
font-weight:bold;text-decoration:underline;background:lightgreen;">
文字の背景色ライトグリーン<br> アンダーライン<br> 太字<br> 斜め文字<br> サイズ普通<br> 緑の文字で<br>
</div>