如何移除Vuetify Parallax组件内部内容的内边距？

我来帮你解决这个问题——移除Vuetify Parallax组件内部内容的内边距其实很简单，主要是针对组件内部的默认容器样式调整，结合你的代码示例给你两种常用方法：

方法一：使用Vuetify内置间距类（推荐） #

Vuetify提供了一套现成的间距工具类，直接给<v-parallax>添加pa-0类就能一键移除所有内边距，这是最符合框架设计规范的做法，不需要额外写CSS。

修改后的代码如下：

<v-parallax 
  src="https://cdn.pixabay.com/photo/2017/05/23/22/36/vegetables-2338824_960_720.jpg" 
  style="min-height: 650px"
  class="pa-0"
>
  <v-row no-gutters align="center" justify="center" style="background-color: rgba(255, 255, 255, 0.6)">
    <!-- 这里放置你的内容 -->
  </v-row>
</v-parallax>

说明：pa-0是padding-all-0的缩写，Vuetify的这类工具类可以快速控制元素的内外边距，避免手写重复样式。

方法二：自定义CSS覆盖默认样式 #

如果内置类在某些Vuetify版本中不生效，你可以直接针对Parallax组件的内部容器样式进行覆盖。Parallax的内容区域默认由.v-parallax__content这个类控制，它自带了默认内边距，我们可以通过CSS重置：

全局样式方式 #

添加以下CSS代码：

.v-parallax__content {
  padding: 0 !important;
}

局部自定义类方式（避免全局污染） #

如果你不想影响所有Parallax组件，可以给目标组件加一个自定义类，比如no-parallax-padding，然后写针对性的样式：

组件代码：

<v-parallax 
  src="https://cdn.pixabay.com/photo/2017/05/23/22/36/vegetables-2338824_960_720.jpg" 
  style="min-height: 650px"
  class="no-parallax-padding"
>
  <v-row no-gutters align="center" justify="center" style="background-color: rgba(255, 255, 255, 0.6)">
    <!-- 这里放置你的内容 -->
  </v-row>
</v-parallax>

对应的CSS：

.no-parallax-padding .v-parallax__content {
  padding: 0;
}

另外，你代码里的<v-row>已经加了no-gutters，这个设置是正确的，它已经移除了row本身的gutter间距，所以只需要处理Parallax的内边距即可。

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