このチャプターの目次
要素の位置の微調整: マージン、パディング (Spacing Helper)
上のリンク先は Vuetify2 のものですが、Vuetify3 でも動きます
要素の位置を微妙に調整したいときは、スペーシングヘルパーと呼ばれる CSS ヘルパークラスを使います。
<template>
<v-container>
<v-container class="d-flex flex-row justify-space-between">
<v-card width="45%" height="100px" class="bg-black">
<v-btn color="primary">
none
</v-btn>
</v-card>
<v-card width="45%" height="100px" class="bg-black">
<v-btn color="primary" class="mt-5">
mt-5 (margin 5 to top)
</v-btn>
</v-card>
</v-container>
<v-container class="d-flex flex-row justify-space-between">
<v-card width="45%" height="100px" class="bg-black">
<v-btn color="primary" class="pt-5">
pt-5 (padding 5 to top)
</v-btn>
</v-card>
<v-card width="45%" height="100px" class="bg-black">
<v-btn color="primary" class="pt-5 pl-5">
pt-5 pl-5
</v-btn>
</v-card>
</v-container>
<v-container class="d-flex flex-row justify-space-between">
<v-card width="45%" height="100px" class="bg-black">
<v-btn color="primary" class="ml-5 mt-5">
ml-5 mt-5
</v-btn>
</v-card>
<v-card width="45%" height="100px" class="bg-black">
<v-btn color="primary" class="pt-5 pl-5 mt-5 ml-5">
pt-5 pl-5 mt-5 ml-5
</v-btn>
</v-card>
</v-container>
</v-container>
</template>
結果: