喫茶LAPON-β

今日はブロックレベル要素と、インライン要素について調べました。

(1)body要素で使われる要素は大きく分けて2つ、ブロックレベル要素と、インライン要素。

(2)それぞれの要素に入れられる要素と、入れられない要素

・ブロックレベル要素...別のブロックレベル要素やインライン要素を入れることができる。
・インライン要素...ブロック要素を入れることはできない。でも、別のインライン要素を入れることができる。

(3)役割

・ブロックレベル要素...文書を構成するブロック
・インライン要素...ブロックレベル要素の内容

(例)↑↑↑
上がブロック要素。
下がインライン要素。

ブロックはブラウザの端っこまで、領域（？）があります。
インラインは文字の範囲でしか、領域がないです。
ブロックにインラインを入れると、枠が二重になりますね。

あ、ブロック要素のなかにあるインライン要素も組んでみればよかった...

(4)改行
・ブロック...改行される
・インライン...改行されない

改めて調べたら、あいまいだった部分もわかってスッキリしました。
CSSを使ってレイアウトをする時に、インラインかブロックか意識しないで組んで大変な目にあった時があります。
インラインにwidthとheghtが効かないのも、横と高さが文字の大きさ分しか無いからだと納得。