【CSS】margin-top,-bottomが効かない原因と解決方法

margin-topとmargin-bottomはやっかいな特徴があり、思った通りの動きをしてくれないことがあります。

margin-topとmargin-bottomが効かない原因とその解決方法を解説します。

なお、この記事ではauto以外の数値を指定した場合の解説をします。

autoが効かなくて困っている方は下記記事をご覧ください。

【原因1】上下のmarginによる相殺が起こっているから

margin-topとmargin-bottomが連続すると小さい方が大きい方に吸われる（相殺される）現象が起こります。

margin-leftとmargin-rightでは起こりません。

※上記は重なりがわかりやすいように横にずらしています。

ブラウザ上の実際の表示

50px+30pxで80px開いてほしいところですが、実際は50pxしか開きません。

可能であればF12からDevToolsを起動してmarginを確認してみてください。

<style>
.example2{
    width: 50%;
}
.example3{
    border: 1px solid #333;
    background: #beeeff;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
<div class="example2">
    <div class="example3" style="margin-bottom: 50px;">div</div>
    <div class="example3" style="margin-top: 30px;">div</div>
</div>

【解決方法1】間に高さのある要素を挟む

borderかpaddingかheightに0より大きい値が指定されている要素を挟みます。

<div class="example2">
    <div class="example3" style="margin-bottom: 50px;">div</div>
    <div style="border-bottom: 1px solid #333;"></div>
    <div class="example3" style="margin-top: 30px;">div</div>
</div>

0より大きければいいので「height:0.1px」でもOKです。

【解決方法2】間にdisplay:flexを挟む

display:flexが指定されている要素を挟みます。

<div class="example2">
    <div class="example3" style="margin-bottom: 50px;">div</div>
    <div style="display: flex;"></div>
    <div class="example3" style="margin-top: 30px;">div</div>
</div>

【解決方法3】margin-top(またはbottom)に統一する

そもそも相殺を起こさせないように、margin-topまたはbottomのどちらかだけ使うようにします。

<div class="example2">
    <div class="example3">div</div>
    <div class="example3" style="margin-top: 80px;">div</div>
</div>

【原因2】上下のmarginは親要素をはみ出すから

margin-topとmargin-bottomは親要素をはみ出す特徴があります。

margin-leftとmargin-rightでは起こりません。

ブラウザ上の実際の表示

<style>
.example5{
    background: #faffc1;
    width: 50%;
}
.example5>.examplediv{
    /*コレ*/margin: 50px auto 30px;
    border: 1px solid #333;
    background: #beeeff;
    width: 70%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
<div class="example5">
    <div class="examplediv">div</div>
</div>

【解決方法1】borderを指定する

親要素に0より大きいborderが指定されているとはみ出ません。

線をつけたくないときはtransparentで透明にしましょう。

<div class="example5" style="border: 1px solid transparent;">
    <div class="examplediv">div</div>
</div>

【解決方法2】paddingを指定する

親要素にpaddingが指定されているとはみ出ません。

0より大きければいいので0.1pxでもOKです。

<div class="example5" style="padding: 0.1px;">
    <div class="examplediv">div</div>
</div>

【解決方法3】overflow: hiddenを指定する

親要素にoverflow: hiddenが指定されているとはみ出ません。

<div class="example5" style="overflow: hidden;">
    <div class="examplediv">div</div>
</div>

【原因3】インライン要素だから

aタグやspanなどのインライン要素はmargin-topとmargin-bottomが効きません。

margin-leftとmargin-rightは効きます。

下記はaタグに「margin-top: 50px」を指定した例ですが、効いていません。

<style>
.example6>div{
    background: #beeeff;
    border: 1px solid #333;
}
.example6>a{
    /*コレ効かない*/margin-top: 50px;
    margin-left: 100px;
    background: #beeeff;
    border: 1px solid #333;
}
</style>
<div class="example6">
    <div>div</div>
    <a href="#">aタグ</a>
</div>

【解決方法】display: inline-blockを指定

inline-blockまたはblock要素にするとmargin-topとmargin-bottomが効くようになります。

下記はaタグにdisplay: inline-blockを指定した例です。margin-topが効くようになりました。

<style>
.example7>div{
    background: #beeeff;
    border: 1px solid #333;
}
.example7>a{
    /*コレ*/display: inline-block;
    /*効く*/margin-top: 50px;
    margin-left: 100px;
    background: #beeeff;
    border: 1px solid #333;
}
</style>
<div class="example7">
    <div>div</div>
    <a href="#">aタグ</a>
</div>

インライン要素、ブロック要素について詳しくはこちら↓

CSSのdisplayについて詳しくはこちら↓

【まとめ】margin上下が効かない原因

【原因1】margin-topとmargin-bottomが連続すると小さい方が大きい方に吸われる（相殺される）から

• borderかpaddingかheightに0より大きい値が指定されている要素を挟む
• display:flexが指定されている要素を挟む
• margin-topまたはbottomのどちらかだけ使う

【原因2】margin-topとmargin-bottomは親要素をはみ出すから

• 親要素に0より大きいborderを指定
• 親要素に0より大きいpaddingを指定
• 親要素にoverflow: hiddenを指定

【原因3】インライン要素はmargin-topとmargin-bottomが効かないから

• display:inline-blockまたはblockを指定

以上、margin上下が効かない原因と解決方法でした。