The other way round

こんにちは ('0')/

どこまで説明するべきか悩むところですが、なるべく詳細に説明したいと思います。長くなります ^^;

まず、 padding にマイナスの値を指定することはできませんので margin の書き間違いだろうと思います。
確認しておきたいのは「marginとpaddingは違う」という点です。ここを混同してしまうと後々害が出ますので念の為説明します。

padding --- 対象要素自身の「内側」の余白
margin --- 対象要素自身の「外側」の余白

paddingは自身にしか影響しないんですが、marginというのは [太字]必ず相手が存在します[/太字]。
相手というのは「上にある要素」「下にある要素」「左にある要素」「右にある要素」ですね。
昨晩掲載したスクリーンショットは別の言い方をすると「ネガティブmarginが他の要素に影響を及ぼしている例」でもあります。

サンプル①
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/samp20201010----1000.png

比較しやすいよう横に並べて表示しています。後続要素の方に注目してください。
このサンプルではどちらも全く同じに見えます。
左は「padding」が付いており、右は「margin」が付いています。
両者は全く同じに見えますが、実際は全然違うのだ、というのが次のサンプルで、対象要素に border をつけることで一目瞭然になります。

サンプル②
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/samp20201010-2----1000.png

paddingは「自身の内側」に
marginは「自身の外側」つまり自身と先行要素(margin-top)の間に
それぞれ余白が生じるわけです。
この違いを理解しておかないと、今後例えばこの対象要素に background-color などの装飾を当てたいと思った場合、paddingの方はひどく不格好になりますよね。
ならば margin を使おう、と考えたくなるところですが、marginには以下のような特徴もあります。

サンプル③
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/samp20201010-3----1000.png

左右の高さが揃わなくなりました。
左は
先行要素の下[太字][斜体][斜体]margin[/斜体][/斜体][/太字] 30px + 対象要素の上[太字]padding[/太字] 30px = 先行要素と対象要素の間隔は 60px
になります。
一方右は
先行要素の下[太字][斜体][斜体]margin[/斜体][/斜体][/太字] 30px + 対象要素の上[太字][斜体][斜体]margin[/斜体][/斜体][/太字] 30px = 先行要素と対象要素の間隔は 60px
には [太字]なりません[/太字]。
上下のmarginというのは相殺(offset)というのが起こり、大きい方が小さい方を吸収しますので、この場合は同じ30pxですからプラスマイナスゼロで [太字]30px[/太字] という計算になります。

------------
marginを使う場合は自身だけでなく周り(左右上下)にある要素のpaddingやmarginを考慮する必要がありますので、paddingよりも使い方は難しいかもしれません。CSSで一番むずかしいのはmarginだ、と個人的に思っています。ネガティブ値を利用する場合はなおさら難易度は高くなります。

一旦投稿しますね。

SECRET