目次
- CSSのmarginが効かないとは？まず一言で
- marginの基本をまず押さえる
- よくある原因①：インライン要素にmargin-topを指定している
- 解決方法
- よくある原因②：マージン相殺（margin collapse）
- 例
- なぜ起きる？
- 回避方法
- よくある原因③：親要素がdisplay:flexになっている
- 例：縦に並べたいのに余白が変
- 解決策
- よくある原因④：gridレイアウトとの関係
- よくある原因⑤：position:absoluteが指定されている
- よくある原因⑥：親要素のoverflowが邪魔している
- 解決策
- 実務でやらかした話
- 横スクロールが出る場合
- DevToolsで確認する手順
- marginとpaddingの使い分け
- marginを使う場面
- paddingを使う場面
- marginが効かないときのチェックリスト
- まとめ：marginは敵ではない
CSSのmarginが効かないとは？まず一言で
marginが効かないと感じる原因のほとんどは、「表示形式」と「文書フロー」を知らないことです。
- margin-topを入れたのに動かない
- margin-bottomが消えたように見える
- 左右は効くのに上下だけ効かない
これ、全部よくあるケースです。
書き方が間違っているわけではない。
仕組みを知らないだけ。
ここを一つずつ整理します。
marginの基本をまず押さえる
marginは「要素の外側の余白」です。
.box {
margin: 20px;
}ただし、marginは万能ではありません。
- 要素の種類
- レイアウト方式（flex / grid）
- positionの状態
- 親子関係
これらに影響されます。
よくある原因①：インライン要素にmargin-topを指定している
spanやaタグなどのインライン要素は、
上下のmarginが効きません。
<span class="text">テキスト</span>.text {
margin-top: 20px; /* 効かない */
}左右は効くのに、上下が効かない。
これ、かなり多いです。
解決方法
.text {
display: inline-block;
margin-top: 20px;
}または block にします。
よくある原因②：マージン相殺（margin collapse）
上下のmarginは「合算」されません。
例
.a {
margin-bottom: 30px;
}
.b {
margin-top: 20px;
}結果は50pxではなく、30pxだけです。
これをマージン相殺と呼びます。
なぜ起きる？
縦方向のmarginは、隣り合うブロック要素で重なり、
大きい方だけが採用される仕様だからです。
回避方法
- どちらか片方だけにmarginを付ける
- paddingに変更する
- 親要素にpaddingを持たせる
.wrapper {
padding-top: 30px;
}よくある原因③：親要素がdisplay:flexになっている
flexboxを使うと、挙動が変わります。
.parent {
display: flex;
}flexの主軸（flex-direction）が横の場合、
上下のmarginが思った通りに働かないことがあります。
例：縦に並べたいのに余白が変
.parent {
display: flex;
flex-direction: row; /* 横並び */
}縦の余白は効きづらい。
解決策
.parent {
display: flex;
flex-direction: column;
gap: 20px;
}実務ではgapを使うほうが安定します。
よくある原因④：gridレイアウトとの関係
gridでも同様に、
gapが使える場面ではmarginよりgapが安全です。
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}gridやflexの世界では、
余白はmarginよりgapを優先するのが今の主流です。
よくある原因⑤：position:absoluteが指定されている
absoluteになると、
要素は通常の流れから外れます。
.box {
position: absolute;
margin-top: 20px;
}marginは効いています。
でも「基準が変わっている」だけです。
absoluteはtopやleftで位置を決めます。
.box {
position: absolute;
top: 20px;
}よくある原因⑥：親要素のoverflowが邪魔している
.parent {
overflow: hidden;
}この場合、marginがはみ出して見えなくなることがあります。
特に背景色があると「効いてない」ように見えます。
解決策
- overflowを見直す
- 親にpaddingを付ける
実務でやらかした話
昔、カードUIでmargin-bottomを入れても効きませんでした。
原因はflexでした。
.cards {
display: flex;
}余白をmarginで作ろうとしていた。
正解はこれでした。
.cards {
display: flex;
gap: 20px;
}marginにこだわると迷路に入ります。
横スクロールが出る場合
.box {
margin-left: 100px;
}これが積み重なると、
スマホで横スクロール発生。
DevToolsでbody幅を見ると、
画面より広がっていることがあります。
DevToolsで確認する手順
- 右クリック → 検証
- 対象要素を選択
- Computedタブでmarginを確認
- 親要素も確認
見るポイント：
- displayの値
- positionの値
- overflowの指定
- flex-direction
ここを見るだけで原因はほぼ特定できます。
marginとpaddingの使い分け
marginを使う場面
- 要素と要素の間隔
- 外側のスペース
paddingを使う場面
- 背景色を含めて余白を作る
- 内側の余白
背景があるならpaddingのほうが自然です。
marginが効かないときのチェックリスト
✔ インライン要素ではないか
✔ flexやgridになっていないか
✔ position:absoluteではないか
✔ マージン相殺が起きていないか
✔ overflowが邪魔していないか
✔ gapで解決できないか
まとめ：marginは敵ではない
marginが効かないとき、
焦る必要はありません。
ほぼすべてが仕様通りの動きです。
見るべきは3つ。
- display
- position
- 親子関係
ここを確認するクセが付けば、
レイアウト崩れやスマホ崩れで詰まる時間は確実に減ります。
marginは正しく理解すれば、とても素直なプロパティです。