marginが消えるのを解決するシンプルな考え方

「あれ？指定した数値でmarginが表示されないよ！なんで、効かないの？」という遭遇になったことはありませんか？

理由をわかっていなかった私は回避策としてpaddingに書き直していました。
(paddingとmarginの違いを理解していなかったようです。）
allWebクリエイター塾で受講したHTML5+CSS入門基礎講座で解決したので共有させていただきます！

こうやってマージンは消える！

どうして、マージンが消えてしまうのでしょうか？
サンプルで確認してみます。

HTMLソース

<div id="olive"></div>
<div id="orange"></div>

CSSソース

#olive { 
background: olive;
width: 510px;
height: 100px;
margin-bottom: 70px;
}

#orange {
background: orange;
width: 510px;
height: 100px;
margin-top: 50px;
}

#oliveの下に70pxと#orangeの上に50pxのmarginを入れています。
一見、70px+50pxなので合計120pxのmarginができるかと思いますが、
実際には70pxしかありません。。どうしてでしょうか？

どうしておきるの？？

collapseを、（コーディング同様）英語もできないのでGoogle先生に聞いてみました。
こわい！marginが崩壊しているとのことです。

対処方法をマスターする！

シンプルな考え方として、marginは一定の方向につけるルールを設けます。
たとえば、水平方向は下につけて、上にはつけない。
垂直方向は左につけて、右にはつけない。などのルールです。

HTMLソース

<div id="olive"></div>
<div id="orange"></div>

CSSソース

#olive {
background: olive;
width: 510px;
height: 100px;
margin-bottom: 50px;
}

#orange {
background: orange;
width: 510px;
height: 100px;
margin-bottom: 50px;
}

一定方向にmarginをつけることで、相殺されることはありませんね！

まとめ

• marginは、重なると消えてしまう
• marginが重なりそうなところは、一定方向にルール化して指定する

たったこれだけのことですが、私は知らなかった時、marginを下に付けたり上に付けたりしていました。
結果、div、p、h1などにどれほど余白がつくのかがわからず、
余計なidやclassを付けて!impotantまで使ってしまいました。（最低すぎる。。）

サイトの読み込み速度も悪くなりますが、このように無駄な指定を行う手間を考えると恐ろしいです。
今回のことで、よりシンプルなソースを目指すことの重要性を再度認識することができました。