marginにマイナスの値を指定する事を、ネガティブマージンまたはマイナスマージンと言います。
デザインによってはネガティブマージンを使用する事もありますので、使い方と注意点を解説いたします。
ネガティブマージンの使い方
ネガティブマージンの使い方は簡単です。marginにマイナスの値を指定するだけとなります。
まずは、例として下記のようなHTMLとCSSを用意しました。
<div class="box1">テキストテキストテキストテキスト</div>
<div class="box2">テキストテキストテキスト</div>div {
color: #FFF;
padding: 20px;
}
.box1 {
background-color: maroon;
}
.box2 {
background-color: teal;
}.box1と.box2にそれぞれ分かりやすいように背景色を設定しました。
次に.box2にネガティブマージンを指定してみます。
div {
color: #FFF;
padding: 20px;
}
.box1 {
background-color: maroon;
}
.box2 {
margin-top: -20px; /* ネガティブマージンを指定 */
background-color: teal;
}このように.box2が.box1に重なり表示されます。
margin-bottomにネガティブマージンを指定した場合は下の要素が上がるイメージです。
次に、左右にネガティブマージンを指定した例を紹介いたします。
左右にネガティブマージンをかけて要素を広げる
左右にネガティブマージンをかける事で、要素の幅を広げる事が可能です。
.box2 {
margin: 0 -20px;
}左右にネガティブマージンを指定する際は、widthを指定していると要素が左にずれるだけとなります。
widthを指定しない事で左右に広がります。(もしかしたら他にやり方があるかもしれません)
ネガティブマージンを使い時の注意点
続いて、ネガティブマージンを使用する際の注意点です。
ネガティブマージンはレイアウトが崩れやすいですので、以下にご注意ください。
要素の重なり順にはposition: relative;、z-indexを使用する
ネガティブマージンを使用した際に、要素が重なった部分の重なり順の指定にはposition: relative;を指定し、z-indexで順番を指定してください。
例として、.box1と.box2を重ねて.box1を全面に表示します。
.box1 {
position: relative;
z-index: 1;
}
.box2 {
margin-top: -20px;
}要素同士を重ねた際にテキストだけ全面にくる
要素同士を重ねた際に、テキストだけ全面にくる場合があります。
そういった時にも、先ほど説明しましたposition: relative;とz-indexを指定してあげると、思ったように重なりを表示できます。
displayの値に気を付ける
ネガティブマージンはインライン要素には一部しか効きません。
そもそもインライン要素の場合margin自体効かないはずなのですが、左右には効き、上下には効きません。効かない場合はブロック要素になっているか確認してみてください。
また、インラインブロック要素(inline-block)の場合は、左右は同じく聞きますが上下にネガティブマージンをかけた場合、要素のpadding分しか効きませんので、こちらも合わせて注意してください。
画像にネガティブマージンはきくのか
画像を表示するimgタグはインライン要素です。
先程説明したように、インライン要素であれば「左右のネガティブマージンは効く」となりますが、imgタグに関してはインライン要素のままでも左右上下のネガティブマージンが有効です。
さいごに
いかがでしたでしょうか。
デザインによってネガティブマージンを使用する場合もありますので、しっかりと使い方を覚えておきましょう。
