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

ちょっと前まで、実は<div>と<span>の違いをわかっていませんでした。
(ついでに言うと<p>との使い分けもよくわかっていない感じだったっていう…。)
インライン要素とブロックレベル要素について改めて調べたときに、ピンときた次第です…。

そんなわけで復習も兼ねてメモです。

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

【インライン要素】…a,img,span,em,strong etc
・文章の中に存在できる要素。
・設定された横幅に達するまではいくつ記述しても横に並んでいく。幅がいっぱいになると折り返す。
・margin、paddingの上下が効かない。
・width、height指定が出来ない。要素の大きさは内容に準ずる。
[例外はアリ：img,table,input etcは指定できる。]
・インライン要素の中にブロックレベル要素は配置できない。

【ブロックレベル要素】…p,li,div,h1,h2,h3 etc
・親要素いっぱいに配置され、縦に並んでレイアウトされる。
・上下のmarginは相殺される。

ブロックレベル要素は親要素の中にぴったり広がることに気付いたときは目から鱗でした！
<h1>や<h2>にもwidth指定をしてwidthの違う親要素間で使い回ししにくくなっていましたが、これに気付いてからはきっちりwidth指定しないと崩れる場合以外は、widthナシにして色々使いまわしています。
[color指定とかだけ複合CSS使って分けたりすると更に使い回ししやすいですね。：複合CSSって便利だよねーという復習もそのうち書きたい。]

そして、インライン要素にdisplay:block;指定することでブロックレベル要素として扱うことができる。ブロックレベル要素にdisplay:inline;指定することでインライン要素として扱うことができる。
以下、よく利用するパターンです。

aをブロックレベル要素にする

テキスト以外の部分もクリックすることができる。
width、heightが有効になるので意図したサイズのボックスを作れる。
ボーダーや背景色をhoverで変更することでロールオーバー画像っぽい演出ができる。
→CSS3のテキストシャドウや角マルを使うとより画像ぽく。

imgをブロックレベル要素にする

imgを中央寄せしたいときに便利です！
インライン要素のままだとmargin:auto;が効かずimg単体で中央寄せができません。
以前はdivやpのブロック要素で括ってtext-align:center;指定をしていました。

imgをブロックレベル要素にすることでmargin:auto;指定が効くようになります。
ちょっとだけコードがスッキリしました！