今更ながらにFireFoxのマージンの相殺について

知ってはいたけど真剣に悩んだことがなくて、いつも結果オーライでいってました。。。

…が、また今日お仕事でコーディングしていてぶち当たったのでちゃんと解決法を考えてみました。

まあ、皆さん知ってると思うのでほぼ自分用のメモです（笑）

Firefoxのマージンの相殺はmargin-topを使ったときの挙動ですね。

たとえば、

#div1{
 margin-top: 20px;
}
#div2{
 margin-top: 20px;
}

こういったCSSがあってdiv1はdiv2の親のdivだとします。

こうした時に、「div2のmargin-topが適用されない」といった現象でたとえ、ブロック要素を入れようがheightを入れようが変わらないんだぞ！…俺！

んで、まあ調べたネットなどでいろいろ見た結果解決策はこれ

#div1{
 margin-top: 20px;
}
#div2{
 margin-top: 20px;
width:100%;
float:left;
}

floatとwidthを設定する！

これ覚えておくように！…俺！

別にコーディング知識をこれ以上深めようとは思ってませんが、実作業で困らない程度には知っておきたいってことです。

これ以上のことはCSSやFirefoxの仕様をネットで調べればいろいろでてきますよ＾＾

まあ、これでもまた詰まってしまって調べたりしたらまた追記していきます。