HTML と CSS を書いていて行き詰まる所は大抵 float 関係と margin 関係です。今日も float を解除した後の margin が効かないハマリに遭遇した。具体的には、height を指定した container で float している奴らを囲んでいる (いつもの手法) にもかかわらず、後続するエレメントの margin-top が全く効かないというもの。会社で 1 番目か 2 番目に CSS に詳しい人に聞いたらあっさり解決でした。なんと、まあ、根本的な原因は typo でしたが……。
また、高さが不定な float 野郎達の流れを解除しつつ margin-top を指定するには、後続する空の div に clear 要素を書けばよいとのこと。どうやら、clear と margin-top は同時に指定しない方が良いらしい。ふむふむ。
さらに、CSS に詳しい人から学んだ恐るべき margin の仕様。私、margin の collapse (相殺) を完全にナメておりました。上下に隣接した div と div の間の margin を指定するとき「今日は top と bottom どっちに書こうかな」などと思っておりましたが (いい加減な……)、値が同じであれば相殺されるので、両方に書いても文法上は OK なんですね。いつも、一方方向の margin でレイアウトしがち……。
最後に、脳天を直撃したのが border や padding の有無で margin の相殺が変わるということ。ズガーン。CSS レイアウトをテストするために 1px の border を書いただけで、微妙に見た目が崩れる原因はこれだったのか。と納得。
CSS はまだまだ学ぶべき事が多いなー。
