フォロー

🧩 エンジニア豆知識 #3──「marginが効かない！？」“その原因”、実はコレです。

by

こんにちは、戦うエンジニア応援団長です。
「CSSでmarginを指定したのに、なぜか反映されない…」という経験、ありませんか？
実はこれ、初心者から現場のベテランまで一度はハマる“CSSの罠”の一つです。

1. marginが効かない代表例：「マージン相殺（margin collapse）」


コーダーの理想──.box1 と .box2 の margin がそれぞれ 30px あるなら、合計60px空くはず！

例えば、こんなコード：

<div class="wrap">
  <div class="box1"></div>
  <div class="box2"></div>
</div>
.box1 {
  margin-bottom: 30px;
}
.box2 {
  margin-top: 30px;
}

…「60px分」空くと思いきや、実際には「30px分」しか空かない！なんで！？

→ 答えは上下のmarginが相殺されているからです。

2. マージン相殺とは？


現実──上下の margin が相殺されて、実際に空くのは30pxだけ。「あれ、思ったより詰まってる…？」

縦方向のmargin同士（たとえば上下のdivの margin-top と margin-bottom）が出会うと、
ブラウザが大きい方のみを採用して、もう一方を“打ち消す”現象です。

つまり…

  • .box1のmargin-bottom: 30px;
  • .box2のmargin-top: 30px;

→ 実際に空くのは「30pxのみ」（合計60pxではない！）

3. 対策いろいろ

  • ① paddingに置き換える
    margin相殺はpaddingでは起こりません。
  • ② overflow: hiddenを使う
    親要素にoverflow: hiddenを指定すると、相殺を防げます。
  • ③ display: flow-root
    最近の定番。これだけで“新しい独立したコンテキスト”を作れます。

.wrap {
  display: flow-root;
}

4. 実務Tips──WordPressテーマやLPでの注意点

WordPressのテーマ制作やLP（ランディングページ）コーディングでは、
や

が上下に並ぶことが多く、意図しないmargin相殺が発生しやすいです。

特に、「上の余白だけ指定してるのに詰まって見える」ときは、真っ先にこの問題を疑ってみましょう！

5. まとめ

  • marginが効かない → margin collapse（相殺）を疑え！
  • 対応策は padding, overflow, flow-rootなど
  • 特にWordPressやLPコーディングで発生しやすい

見えない“仕様”に惑わされず、スマートに対応！
戦え、エンジニア諸君！！🧩🔥

コメントする