ネガティブマージン

ネガティブマージンは使わないほうがいいのでしょうか？
positionのマイナスとどう違いますか？

No.2 回答者： tkmojo 回答日時： 2013/07/10 10:33

ちゃんとブラウザごとの挙動を把握して使えるなら使っても全然問題ないです。

positionとの違いはパッと説明するのが難しいですが、
ネガティブマージンが一番主観的に使いやすいと思います。

例えば、高さが100pxのものに対して、それぞれ以下の指定を入れたとしましょう。

.a{margin-top:-50px;}
.b{position:relative;top:-50px;}
.c{position:absollute;top:-50px;}

「a」の場合は、単純に50px上に上がります。
IE6では親ボックスからはみ出した部分が切れてしまいますので、下側の50pxしか表示されません。
これはposition:relative;を入力する事で回避できます。

「b」の場合も同様に50px上に上がりますが、「元々それがあるはずだった範囲」に隙間が空いたままになります。
ですので、「b」の後に記述している内容は、必然的に「b」の下50px後に開始されます。
個人的にはあまりお勧めしません。

「c」の場合はまず親ボックスにposition:relative;を入れましょう。
こうしていることによって、「c」の基準点が親ボックスの左上になります。
親ボックスにrelativeの指定をしていない場合には、ブラウザの左上からの指定になりますので注意してください。

「c」の場合も50px上に上がりますが、感覚的には「浮いた」ような状態になります。
「c」の後に記述しているものは、「c」の位置や高さに関係なく親ボックスの左上から開始されますので、
「c」の後のオブジェクトに何も指定しなかった場合には「c」と必然的に被る事になります。

とりあえずやってみないと、それぞれの特徴はわかりにくいと思うので
色々試してみてください。
その時々によって、何が適しているかが変わります。

ガチガチの位置固定ではなく、単純に「ちょっとマイナスの値を入れたい」というような場合は
ネガティブマージンで事足りる事が多いと思います。

No.1 回答者： ORUKA1951 回答日時： 2013/07/07 17:19

「負の値は不正ではないが、実装上は値に特定の制限範囲が生じることもある。

( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )」が、必要な使えばよいです。
　⇒10.3 内容領域の幅と水平方向のマージンを計算する( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )