ネガティブマージンについて

Question

Wordpressで想定していない余白が出たため、paddingやmarginを色々な手を使って、
余計な余白を削ろうとしたのですが、うまくいかずネガティブマージンで、余白を削ってみました。

マイナスを使うのはどうなんだろう？と思って不安なのですが、こういう場合のネガティブマージンは

いいんでしょうか？

使いすぎにはよくないとか、力技はよくないとか、googleで調べるとよくないと書いてあったり、

逆に問題ないと書いてあったり、何が正解なんでしょうか。

Answer 1

うまく使えば有用なものにもなりますが、あまりネガティブマージンだらけにするとカオス化します。

例えば、Bootstrapにもネガティブマージンのコードが入っていたりします（実際のコード）。

Comments

[退会済みユーザー]

カオス化ですが…さすがに避けたいですね。ありがとうございます。

Answer 2

ブラウザによって余白の初期設定は異なるためマイナスのマージンは極力避けた方がいいと思います。
一旦、リセットCSSで余白をリセットしてから作り込めば、ネガティブマージンは出来にくくなります。
ブラウザの初期スタイルのリセット

Comments

[退会済みユーザー]

ありがとうございます。リセットも行ったのですがうまくいきませんでした。でもなんとかしてみます。

[退会済みユーザー]

うまくいっていないのにベストアンサーに選んで頂きましたが、大丈夫でしょうか？

[退会済みユーザー]

すいません。間違えて押してしまいました。

Answer 3

いいか悪いかで言えばよくないでしょうね。
太郎君がリンゴを一個、花子さんがリンゴを一個もっていて、合計何個？と聞かれている問題に
1+2-1=2で2個です、と答えているようなものなので。

これでは先生（他のソースを見る人）からしたら訳が分からないので、×がつく可能性があります。
でも先生が答えさえあってりゃそれでいいやって思う人であれば問題ないでしょうね。
要は人それぞれです。

自分なら結果が想定していないものである以上、なんとか原因究明して直そうとしますね…
そういうCSSは連鎖的に変な状態を引き起こしたりするので。

Comments

[退会済みユーザー]

そうですよね。私もちょっと気持ち悪いので直したいのですが、なんか時間だけが無駄に過ぎていくのに焦ってしまって…まだ時間はあるのでがんばってみます。

Answer 4

「ネガティブ」と言う言葉が、後ろ向きな意味で感じるのでしょうが、別に使用しても問題ありませんし、多用しても罰則があるわけでは無いです。

しかし、他の回答にあるように、多用するとマージン計算が複雑になり、デザイン崩れの原因になりやすいのは事実ですので、注意が必要です。

あくまでも「ネガティブマージン」を使ったから、デザインが崩れるのではなく、設計時の計算がややこしくなるために計算間違いで、デザインが崩れると言うだけで、キチンと計算出来れば、大丈夫です。

Answer 5

Webサイト全体で何個も登場するようなものにネガティブマージンを付けると、
デザイン改良の為に手を加えた瞬間大幅なレイアウト崩れが発生して、
サイト大崩壊ということが考えられるのがネガティブマージンの恐ろしい所です。

floatと同じくどうしても急ぐケース以外では使わない方が望ましいですね。
急いだ時は使いたくなるのも分かりますが、ぐっとこらえて考えると力になりますしね！

---

Webサイト全体で1個しか存在しないようなものに関しては良いと思います。
クラス名を限定的で長いモノを付与するなど、少しだけ使うようにしてくださいね。

Comments

[退会済みユーザー]

ありがとうございます。そうなのですね。Wordpressでどうしても静的ページで作ったものよりも余白が出てしまって苦肉の策でやってしまいましたが、他の方法を試してみます。

[miyabi-sun]

納期は納期で大事ですからね！
上手くバランス取れるよう頑張ってください

[退会済みユーザー]

ありがとうございます！