0からはじめるWebサイト制作の勉強|知行合一

2015年6月より求職者支援訓練でWebサイト制作を学んでいます。学んだことの要点や実践での備忘録を記録して、一歩ずつ成長に努めます。

marginの相殺は入れ子でも発生する

入れ子になっている子要素の上下の空き設定で嵌ってしまったので、
今後の糧にするべくメモに残しておきます。

経緯

  • 親要素(div#container)に「margin: 0 auto;」を設定。
  • 子要素の上部に空きを20px空けたかったので、子要素に「margin-top: 20px;」を設定。

やらかした結果

親要素のmargin-top「0」と子要素のmargin-top「20px」が相殺され、
親要素のmargin-topに「20px」が適用されたようになりました。
また、親要素と子要素の間で上の空きが無いように見えてしまいました。

f:id:jingorow:20151024161645p:plain
このようにしたかったが。。。

f:id:jingorow:20151024161726p:plain
やらかした結果

marginの相殺を回避する方法

親要素にpaddingを設定し、子要素にmarginは設定しない。

上のmarginが相殺されないようにするには、親要素に「padding-top」を、
下のmarginを相殺されないようにするには、親要素に「padding-bottom」を設定します。

今回の場合だと、親要素で「padding-top: 20px;」を設定して、子要素で「margin-top」は設定しまないのが正解でした。

次からは気を付けます。。。orz