ネガティブマージンとは

ネガティブマージンとは、marginプロパティ（表示画面範囲）に、マイナスの数値を指定することです。

 

 

そもそもマージンとは？

表示サイズにおける一番外側のスペースのこと。これをマージン（margin）と呼びます。

そのマージンをマイナス値（ネガティブ）にした場合、こんな風なイメージ。

マージンが画面外（－値）に振り切れます。

 

ネガティブマージンでできることは？

ネガティブマージンは「画面（枠）いっぱいにデザインしたい」というときに役立ちます。

 

例えば下の図のようにタイトルに下線を付けたとき…

通常のマージンだと隙間が空いてしまいます。

が、ここでマージンの値をマイナス値にするとこうなります。

こんな感じに、「画面（枠）いっぱいに○○したい」というときに、ネガティブマージンは役立ちます。

 

他にも画面全体だけでなく、ボックスにもネガティブマージンは効きます。

上の図のように、ボックスの中に入った写真を、ボックスいっぱいに表示することも可能。

ネガティブマージンをうまく使いこなせば、デザインの幅が広がります。

 

「ネガティブマージン」のおさらい

 

関連用語

・CSS

・コーディング

・マテリアルデザイン