はじめに
コーディングを始めたばかりの頃、私はよく「なんで思った通りに動かないんだよ…」と頭を抱え悩んでいました。
・余白を入れたいのにmarginを書いても適用されない
・中央揃えにしたくても見た目が全然変わらない
・横に並んでほしいのに縦並びになる（逆もあり）
こんな小さな「？」を積み重ねていた時期に、
仕事帰りで頭が回らないまま margin と格闘していて、
気づいたら「あ”あ”ッ＠＊‼」って吠えてました。
なんで動かないの？
何が悪さしているの？
思い通りに動いてよ！
そんな混乱をきっかけに調べてみると、divとspanの違いやdisplayという概念があることをしりました。
さらに、そこから「block」と「inline」という、要素には2つ性質があることを知ったんです。
block 要素とは
・横幅いっぱいに広がる（親要素を占有する）
・前後で改行される
・width や height、margin、padding が効く
例：div、p、section など
<div>block要素です</div>
<div>これもblock要素</div>→ 上下にバシッと分かれて表示されます。
テトリスでいうと、あの「長い棒」みたいなイメージです。
inline 要素とは
・文字のように横に並ぶ
・前後で改行されない
・width や height は基本効かない
・margin や padding の上下は反映されにくい
例：span、a、strong など
<span>inline要素</span>
<span>横に並ぶ</span>→ こっちは横にスーッと並びます。
テトリスの 4×4 の小さいブロックに近いかも。
初心者のころの勘違い
当時の私は「blockが効かないなら inline でいいや」と、
なんとなくの感覚で使っていました。
それより inline-block が最強だと思って、困ったら全部それに逃げる日も多かったです。
でも、あるとき inline-block を使っても全く動かなくて、
「え…これもダメなの？」って一瞬フリーズしました。
ちょっと恥ずかしくなるあの感じ、今でも覚えてます。
結局のところ、
画面いっぱいに広げたいなら block、
横に並べたいなら inline。
この基本さえ分かっていれば、
inline-block に頼りすぎる必要はなかったんですよね。
見た目は似てても、
block は箱として積む、inline は文字のように並ぶ。
この違いが腑に落ちてから、レイアウト崩れの原因が少しずつ読み解けるようになりました。
div は block？ inline？ と迷うこともありますが、
inline の種類だけ覚えておくほうが早いです。
数が圧倒的に少ないので。
まとめ
block と inline の違いが分かると、コーディングが本当に楽になります。
私も margin が言うことを聞かずに、時間を溶かして沼っていた時期がありました。
「何が違うんだ？」「どこが悪いんだ？」と深みにハマっていくばかりで…。
でも、あとから振り返ると、
block と inline を変えるだけでサッと解決できる場面がいくつもあったんですよね。
あの時に溶かした時間が、どこかの誰かの助けになったら嬉しいです。
コメント