ホームへ

【CSS】マイナス(ネガティブ)marginの使い方・注意点

marginはマイナスの値を指定することができます。

マイナス(ネガティブ)marginでは何ができるのか、どんなことに注意しなければならないのか解説します。

要素を重ねる効果

マイナスmarginを指定すると要素を重ねることができます。

このとき後述された要素(弟要素)が前に来ます。

兄要素
margin-top:-20px
<style>
.example{
    border: 1px solid #333;
    background: #dbe8f5;
    padding: 20px;
}
.exampleA{
    background: #FFF;
    border: 1px solid #333;
    padding: 20px;
}
.exampleB{
    /*コレ*/margin-top: -20px;
    margin-left: 20px;
    background: #ffc49f;
    border: 1px solid #333;
    padding: 20px;
    width: 250px;
}
</style>
<div class="example">
    <div class="exampleA">兄要素</div>
    <div class="exampleB">margin-top:-20px</div>
</div>
margin-bottom:-20px
弟要素
<style>
.example2{
    border: 1px solid #333;
    background: #dbe8f5;
    padding: 20px;
}
.example2A{
    /*コレ*/margin-bottom: -20px;
    margin-left: 20px;
    background: #ffc49f;
    border: 1px solid #333;
    padding: 20px;
    width: 250px;
}
.example2B{
    background: #FFF;
    border: 1px solid #333;
    padding: 20px;
}
</style>
<div class="example2">
    <div class="example2A">margin-bottom:-20px</div>
    <div class="example2B">弟要素</div>
</div>

親要素からはみ出る効果

マイナスmarginを指定すると親要素からはみ出すことができます。

margin: 0 -30px
<style>
.example3{
    border: 1px solid #333;
    background: #dbe8f5;
    padding: 20px;
}
.example3A{
    margin: 0 -30px;
    background: #ffc49f;
    border: 1px solid #333;
    padding: 20px;
}
</style>
<div class="example3">
    <div class="example3A">margin: 0 -30px</div>
</div>

これを応用して親のpaddingと同じ値だけマイナスmarginを指定することで親の幅と同じ幅にすることができます。

margin: 0 -20px
margin未指定
<style>
.example4{
    border: 1px solid #333;
    background: #dbe8f5;
    padding: 20px;
}
.example4>div{
    background: #ffc49f;
    border: 1px solid #333;
    padding: 20px;
}
</style>
<div class="example4">
    <div style="margin: 0 -20px;">margin: 0 -20px</div>
    <div>margin未指定</div>
</div>

マイナスmarginの注意点

z-indexで重なり順を変更するときは「position:relative」を指定すること

重なり順に指定するCSSといえば「z-index」ですが、これはstatic以外のpositionを指定することが必須です。

position:relativeをセットで指定することを忘れないようにしましょう。

margin-bottom: -20px
弟要素
<style>
.example5{
    border: 1px solid #333;
    background: #dbe8f5;
    padding: 20px;
}
.example5A{
    margin-bottom: -20px;
    /*コレ*/z-index: 2;
    /*コレ*/position: relative;
    margin-left: 20px;
    background: #ffc49f;
    border: 1px solid #333;
    padding: 20px;
    width: 250px;
}
.example5B{
    background: #FFF;
    border: 1px solid #333;
    padding: 20px;
}
</style>
<div class="example5">
    <div class="example5A">margin-bottom: -20px</div>
    <div class="example5B">弟要素</div>
</div>

インライン要素、inline-blockの場合margin-topとmargin-bottomは効かない

まずimgを除くインライン要素は正負に関わらずmargin-topとmargin-bottomが効きません。leftとrightは正負ともに効きます。

imgは正負ともにmargin-topとmargin-bottomが効きます。

次にinline-block要素は正のmargin-topとmargin-bottomは効きますが負の値は効きません。

厳密にはpaddingで相殺される分までは効くのですが、ややこしいので「インライン要素とinline-blockの場合、margin-topとmargin-bottomのマイナスは効かない」と覚えておきましょう。

下記はそれぞれの要素に「margin-top:-30px」を指定した例です。

inline-block

兄要素
inline-block

テキストは重ならない

インライン要素

兄要素
インライン要素

重なっているのはpadding部分

img

兄要素

マイナスmarginが効く

paddingにマイナスなし

marginはマイナスの値を指定できますが、paddingはマイナスを指定できません。

【まとめ】マイナスmarginの使い方

マイナスmarginを指定すると要素を重ねる、親要素からはみ出すことができる。

注意点

z-indexで重なり順を変更するときは「position:relative」を指定すること

  • インライン要素→margin-top、margin-bottom効かない
  • img→margin-top、margin-bottom効く
  • inline-block→マイナスのmargin-top、margin-bottom効かない

paddingにマイナスなし

以上、マイナス(ネガティブ)marginの使い方・注意点でした。

マンガで読める関連記事