ネガティブマージンとは
ネガティブマージンとは、マイナス値が与えられたmarginプロパティのことを言います。
通常フローの場合、topまたはleftにネガティブマージンを指定した際は、その指定した方向に上、または左に引っ張られたように動きます。
サンプル１
ところが、bottomまたはrightにネガティブマージンを指定した際は、下または右に要素は動きません。その代わり、それに重なった要素を引っ張ります。
サンプル２
サンプル３
ネガティブマージンの便利な使用法
divなどで作成したボックスに右マージン10pxを指定し、ボックスごとの隙間を確保したとします。
次に右マージン20pxを指定し適度なマージン幅を空けます。
ところが右端のボックスにはマージンを空けたくない場合、
親要素に対してボックスにかけただけのマージン幅と同等のマイナスマージンをかけます。
この場合だと−20pxです。そうするとカラム落ちすることなくボックスが並んでくれます。
この例はWebクリエイター能力認定試験 XHTML 1.0対応のサンプル問題の「オススメWalk〜Okayama Walk」で出題されています。
一部分を抜き出して多少脚色したサンプルを用意しました。
色々編集して理解を深めるとよいでしょう。
＊脚色は背景色の設定とフロートの影響を無くして親要素が囲めるようにoverflow:hiddenを追加しています。
その他ネガティブマージンを利用したテクニック例です。
