Vuetify v-parallax元素出现意外边距，如何消除？

问题核心 #

使用Vue 3 + Vuetify 3开发着陆页时，v-parallax元素无法铺满全屏，页面四周出现意外边距，环境为Chrome 108.0.5359.126。

解决方案 #

导致边距的主要原因是Vuetify的v-container默认带有水平内边距，以及浏览器默认的body外边距，只需两步即可解决：

• 移除所有冗余的<v-container>组件：LandingPage.vue和TopPageParralax.vue中的v-container是多余的，它们自带的padding会导致布局出现边距。
• 重置浏览器默认样式：清除body的默认外边距，避免页面最外层出现空白。

修改后的完整代码 #

LandingPage.vue #

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

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

<style></style>

TopPageParralax.vue #

<template>
  <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>
</template>

<style>
/* 重置浏览器默认的body外边距 */
body {
  margin: 0;
}

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>

修改后，v-parallax会完全铺满视口，不再有意外边距，同时保留向下滚动的功能。

内容的提问来源于stack exchange，提问作者Brayden Johnson