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

2022年03月19日

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

マイナス(ネガティブ)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>

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

親要素からはみ出る効果

マイナス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>