我的 Vuetify 元素有意外的边距，我该如何删除它？

Question

I'm trying to write a landing page, and I'm attempting to use a v-parallax element that covers the whole page and can be scrolled down.

In my code, I have a view named LandingPage.vue, a component named TopPageParralax.vue, and then my main App.vue.

LandingPage.vue:

<template>
  <v-container>
    <top-page-parralax />
  </v-container>
</template>

<style></style>

<script>
import TopPageParralax from "@/components/TopPageParralax.vue";
export default {
  name: `LandingPage`,
  components: {TopPageParralax},
};
</script>

<style>

</style>

TopPageParralax.vue:

<template>
  <v-container>
    <v-parallax height="100vh" src="https://braydenjohnsondevlandiing.s3.amazonaws.com/Complex+Square+Grid+With+Drop+Shadows.png">
      <v-row class="fill-height" align="center" justify="center">
        <v-col cols="12" class="text-center">
          <h1 class="display-2 font-weight-bold mb-3">Brayden Johnson</h1>
          <h2 class="display-4 font-weight-light">Front End Web Developer</h2>
        </v-col>
      </v-row>
    </v-parallax>
  </v-container>
</template>

<style>
v-parallax {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
</style>

<script lang='ts'>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'TopPageParralax',

});
</script>

App.vue

<template>
  <v-app>
    <v-main>

      <router-view/>
    </v-main>
  </v-app>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
})
</script>

<style> </style>

I'm expecting no margin, however I get the following result:

For some information: I'm using Chrome V108.0.5359.126 and Vue 3 with Vuetify 3

Answer 1

You need to add the fluid property to v-container which fully extends the width.

To remove the default margin add ma-0 property to component class property

To remove the default padding add pa-0 property to component class property

Answer 2

Actually, the theme installed site is distracting. If you want to define your custom property then use.important suffex to css property. e:g margin; 10px !important;