➖

Vuetifyでネガティブマージンを設定する方法

に公開2件
CSS
Vue.js
Vuetify
tech

はじめに

Vuetifyのユーティリティクラスを使うと、簡単に margin や padding を設定できますが、実は「ネガティブ（マイナス）な値」も指定できることをご存じでしょうか？

ネガティブマージン・パディングの設定方法

Vuetifyのユーティリティクラスでは、通常 m-5 や p-3 のように指定して margin や padding を適用できます。
ここで「ネガティブな値」を設定したい場合は、数字の前に n を追加するだけでOKです。

例：ネガティブマージンを適用

例えば、以下のように my-n5 と指定すると、上下の margin に -20px が適用されます。

<template>
  <v-container>
    <v-card class="my-n4 pa-4">
      ネガティブマージンが適用されたカード
    </v-card>
  </v-container>
</template>

この場合、通常my-4なら16pxのマージンが付きますが、
my-n4とすることで-16pxのマージン（=上と下の要素が16px分近づく） が適用されます。

まとめ

Vuetifyでは、 n をつけるだけで簡単にネガティブマージンを適用できます。
ちょっとした調整をしたい時にすごく便利なので、ぜひ活用してみてください！

参考

https://vuetifyjs.com/en/styles/spacing/#negative-margin

Discussion