ネガティブマージンの使いどころ

はじめに こんにちわ、フロントエンジニアの川上です。今回は自分も初めて見た時に使い方に戸惑ったCSSのネガティブマージンについて記事を書かせていただきます。 ネガティブマージンとは、CSSのmarginにマイナス値を設定することを指します。大抵は正の数をしてしますが、負の数を設定するとどうなるのでしょうか。 特にCSSでは、この書き方でなければ問題が解決できないということは、ほとんどありません。CSSをコーディングする人によって書き方は無数に存在しますし、どの書き方でも見た目は一緒になります。しかし、CSSのプロパティの数やエレメントの数が少ないほど、見やすく理解しやいすいコードになり、それは良いコーディングのひとつであると考えます。 ネガティブマージンも良いコーディングのための書き方と捉えていただけると良いと思います。 ネガティブマージンの使いどころ ネガティブマージンの使いどころとして

[Knoa]

私にとってのネガティブマージンの最大の使いどころは、ポジティブパディングと組み合わせて「クリッカブルな範囲を大きくする」こと。ユーザビリティ改善に便利だよ。私以外で活用してる事例見たことないけど。

[pmint]

スパゲティコードの元。widthが指定もしてない値になるのでダメ。親要素をはみ出しちゃうのもダメ。

[bellonieta]

ネガティブマージンは絶対悪、少し読みにくくなろうと将来の保守性考えたら使わない方が良い、と習った勢。

[kako-jun]

muiで、 Font Awesomeのアイコンを使って円形のボタンを作った時、デフォルトのマージンだと隣のラベルとの間隔が広すぎるので、ラベルの上までクリック範囲をはみ出させるために、マイナス値を入れたことある