Vuetifyの必須・便利コンポーネントであるv-containerですが、普通に表示すると他要素との間にいい感じの余白が入ります。
<v-app-bar color="blue lighten-3">app-bar</v-app-bar>
<v-container>
<v-row>
<v-col cols="3">
<v-card height="100" color="amber lighten-4"> v-card </v-card>
</v-col>
</v-row>
</v-container>
↓
見やすい余白が勝手に入ってくれるのでありがたいのですが、以下のように密着して表示させたいこともあります。
MarginやらPaddingやらをいじることで密着させるのですが、VuetifyにはこのMarginとPaddingを簡単に設定できるヘルパークラスが存在します。
Spacingヘルパー
Spacingヘルパーを使うことで、簡単に各要素の余白を調整できます。
記法はシンプルで、{Margin/Paddingのどちらか}{どの方向か}-{どれだけの幅か}の順に書くだけです。例えば上方向のMarginとPaddingを0にしたいのであればmt-0 pt-0となりますし、上方向のMarginを2(8px)、左方向のMarginを1(4px)、下方向のPaddingを3(12px)にしたいならmt-2 ml-1 pb-3という具合です。
上記のv-containerでやってみる
v-containerはデフォルトでMarginとPaddingが効いているので、0にします。
<v-app-bar color="blue lighten-3">app-bar</v-app-bar>
<v-container mt-0 pt-0>
<v-row>
<v-col cols="3">
<v-card height="100" color="amber lighten-4"> v-card </v-card>
</v-col>
</v-row>
</v-container>
あれ、Margin, Paddingともにゼロにしたのになぜか微妙に隙間が空いていますね。
おそらくですが、v-app-bar, v-containerともに、視覚効果のための影のキワまで1つのコンポーネントとなっているため、パッと見では隙間が空いているように見えるのかと思います。
試しにこのコンポーネントの境界部分を限界まで2値化したところ、隙間があるように見えていた部分も、実は影で埋まっていることがわかりました。
「隙間みたいに見えますけど実は影で埋まってるんで」と言われてもどうしようもないので、これを埋めるためにネガティブマージンを使います。
ネガティブの名の通りMarginに負の数を与えるイメージで、要は他要素に重ねるように表示することができます。
<v-app-bar color="blue lighten-3">app-bar</v-app-bar>
<v-container mt-n2 pt-0>
<v-row>
<v-col cols="3">
<v-card height="100" color="amber lighten-4"> v-card </v-card>
</v-col>
</v-row>
</v-container>
v-containerをv-app-barの影に重ねるように、v-containerの上方向にネガティブの2(8px)を設定しました。
これで無事に密着して（いるように）表示させることができました。