Chapter 17無料公開

要素の位置の微調整: マージン、パディング (Spacing Helper)

超Lチカ団編集局
超Lチカ団編集局
2024.01.08に更新

要素の位置の微調整: マージン、パディング (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>

結果:

image.png