My Vuetify element has an unexpected margin, how do I remove it?-CodePudding

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  align="center" justify="center">
        <v-col cols="12" >
          <h1 >Brayden Johnson</h1>
          <h2 >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: Example of page output

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

CodePudding user response：

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;

CodePudding user response：

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