marginの相殺は入れ子でも発生する
入れ子になっている子要素の上下の空き設定で嵌ってしまったので、
今後の糧にするべくメモに残しておきます。
経緯
- 親要素(div#container)に「margin: 0 auto;」を設定。
- 子要素の上部に空きを20px空けたかったので、子要素に「margin-top: 20px;」を設定。
やらかした結果
親要素のmargin-top「0」と子要素のmargin-top「20px」が相殺され、
親要素のmargin-topに「20px」が適用されたようになりました。
また、親要素と子要素の間で上の空きが無いように見えてしまいました。
このようにしたかったが。。。
やらかした結果
marginの相殺を回避する方法
親要素にpaddingを設定し、子要素にmarginは設定しない。
上のmarginが相殺されないようにするには、親要素に「padding-top」を、
下のmarginを相殺されないようにするには、親要素に「padding-bottom」を設定します。
今回の場合だと、親要素で「padding-top: 20px;」を設定して、子要素で「margin-top」は設定しまないのが正解でした。
次からは気を付けます。。。orz