どうも、7noteです。marginが効かない時に確認する3つのことについて。

可能性1： インライン要素には、上下のmarginが効かない
可能性2： marginの相殺が起こっている
可能性3： 他の場所で書いているcssが影響している or スペルミスなどで効いていない

可能性1： インライン要素には、上下のmarginが効かない

<span>あいうえお</span>

span {
  margin: 50px 0; /*←上下のmarginは効かない*/
}

対策方法

span {
  margin: 50px 0;
  display: inline-block; /*inline-block要素、もしくはblock要素にする*/
}

paddingは上下にも効くので、paddingで対応するのも可。
インライン要素には他にも効かないcssがあります。
くわしくは過去の記事をご覧ください→【初心者でもわかる】インライン要素に指定できないcss

可能性2： marginの相殺が起こっている

<div class="top-block">ブロック１</div>
<div class="bottom-block">ブロック２</div>

.top-block {
  margin: 0 0 50px; /*下向きに50pxのmargin*/
}
.bottom-block {
  margin: 30px 0 0; /*相殺され、効いていないのと同じ*/
}

marginはpaddingと違い他の要素のmarginと合算されず、数値が大きい方の分のmarginしかつかない。
つまり相殺（一般的には相殺と言われているが正確には数字が小さい方だけが効かなくなる状態）が起こる。
今回の例では要素の間は50px分しか余白がとれない。

対策方法

.top-block {
  margin: 0 0 80px; /*どちらかのmarginに集約して書く*/
}

もしくは

.top-block {
  margin: 0 0 50px; /*どちらか片方、もしくは両方をpaddingで書く*/
}
.bottom-block {
  padding: 0 0 30px; /*どちらか片方、もしくは両方をpaddingで書く*/
}

可能性3： 他の場所で書いているcssが影響している or スペルミスなどで効いていない

<p class="box">
  あいうえお
</div>

.box {
  margin: 0 0 50px; /*下向きに50pxのmargin*/
}
p {
  margin: 0 0 80px; /*効かない*/
}

cssにはセレクタの書き方で優先順位が代わります。
例ではp要素よりもクラスに指定しているcssの方が優先順位が高いため、pにmarginを書いても効きません。

CSSの優先順位についての記事を紹介
→https://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666

対策方法

検証ツールで現在どのcssが効いているのか確認し、優先順位を理解しながらcssを書き直す。

「検証ツールの使い方」(例 mac:chromeの場合 )
・ホームページ上で右クリック→「検証」
もしくは
・F12キーを押す

上のタブを「Elements」に合わせると、HTMLやCSSが表示されます。
上の画像では右側に対象の要素に現在効いているcssが表示されています。
打ち消し線が表示されているところは効いてないcssということになります。

スペルミスなんかもここで気づくことがあるので、見直してみましょう。

まとめ

他にもflexboxの時は効かなかったり、floatやposition: absolute;の時も指定によっては効かないことがあります。検証ツールを使えるようになれば、現状どこがどう効いているのか、marginの場合ならオレンジで表示されている場所がmarginによる余白なので、どこに効いているか確認して修正していきましょう！

おそまつ！