インライン要素＆ブロック要素
インライン要素＆ブロック要素
.- インライン要素
-
- <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>