でん⚡きかいでんのブログ

3Dプリンター、3DCG、PC、電子工作、HTML、CSS、ミシン、ペンタブレット、アイデア・材料・道具の紹介。PCデータのわかりやすいバックアップ方法。PC関連機器の使用感レビューなど。

2015.02.04 [水]

インライン要素ブロック要素

display:

.dis-in { display:inline; background-color:#111; }
.dis-bl { display:block; background-color:#111; }
.dis-inb { display: inline-block; background-color:#111; }

inline

　改行されず、後に続いて並んでいく。次々とラインになっていく。もちろん<br>を入れれば改行される。

<div class="dis-in">
とうきょうとっきょきょかきょくきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。
</div>
<div class="dis-in">
となりのきゃくはよくかきくうきゃくだ。
</div>
<div class="dis-in">
ぼうずがびょうぶにぼうずのじょうずなえをかいた。
</div>

結果

とうきょうとっきょきょかきょくきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。

となりのきゃくはよくかきくうきゃくだ。

ぼうずがびょうぶにぼうずのじょうずなえをかいた。

block

　1行まるごと専有し、次に来るものは必ず改行される。これは1つのブロックである。

<div class="dis-bl">
とうきょうとっきょきょかきょくきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。
</div>
<div class="dis-bl">
となりのきゃくはよくかきくうきゃくだ。
</div>
<div class="dis-bl">
ぼうずがびょうぶにぼうずのじょうずなえをかいた。
</div>

結果

とうきょうとっきょきょかきょくきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。

となりのきゃくはよくかきくうきゃくだ。

ぼうずがびょうぶにぼうずのじょうずなえをかいた。

inline-block

　1つ1つがブロックとしての塊。次に来るものは改行される。

<div class="dis-inb">
とうきょうとっきょきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。
</div>
<div class="dis-inb">
となりのきゃくはよくかきくうきゃくだ。
</div>
<div class="dis-inb">
ぼうずがびょうぶにぼうずのじょうずなえをかいた。
</div>

結果

とうきょうとっきょきょかきょくきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。

となりのきゃくはよくかきくうきゃくだ。

ぼうずがびょうぶにぼうずのじょうずなえをかいた。