减少 Vuetify 列表中项目之间的垂直空白
reduce vertical whitespace between items in a Vuetify list
This codepen example 显示了一个包含 3 个项目的非常简单的 Vuetify 列表。我想减少列表中每个项目的空白量 above/below。
我检查了标记并注意到每个标记都应用了 12 像素的垂直填充
<div class="v-list-item__content">
这是每个人创造的
<v-list-item-content>
但是如果我将它设置为 0px，空白不会减少。我认为问题的原因是这些元素中的每一个都有 61px 的高度，但由于某种原因似乎无法更改它（属性 在 Chrome 开发工具中显示为灰色） .
我想我应该设置一些 flexbox 属性，但我不确定是哪一个。
space 来自 vuetify css:
.v-list--two-line .v-list-item, .v-list-item--two-line {
min-height: 64px;
}
如果您进入开发控制台并禁用该行，您将看到间距消失。
您需要使用更具体的选择器覆盖 css。
如果您尝试从 12 开始增加内边距，它会显示变化，但是当您将它从 12 减少时，就会有已知的变化，所以唯一的可能性是父级已被赋予特定的高度并且它是一个弹性框和对齐项目：中心； 属性 已被使用，因此它会相应地对齐自身并给出 12px 的默认填充。
降低父元素的高度，我想你可以开始了！
This codepen example 显示了一个包含 3 个项目的非常简单的 Vuetify 列表。我想减少列表中每个项目的空白量 above/below。
我检查了标记并注意到每个标记都应用了 12 像素的垂直填充
<div class="v-list-item__content">
这是每个人创造的
<v-list-item-content>
但是如果我将它设置为 0px，空白不会减少。我认为问题的原因是这些元素中的每一个都有 61px 的高度，但由于某种原因似乎无法更改它（属性 在 Chrome 开发工具中显示为灰色） .
我想我应该设置一些 flexbox 属性，但我不确定是哪一个。
space 来自 vuetify css:
.v-list--two-line .v-list-item, .v-list-item--two-line {
min-height: 64px;
}
如果您进入开发控制台并禁用该行，您将看到间距消失。
您需要使用更具体的选择器覆盖 css。
如果您尝试从 12 开始增加内边距，它会显示变化，但是当您将它从 12 减少时，就会有已知的变化，所以唯一的可能性是父级已被赋予特定的高度并且它是一个弹性框和对齐项目：中心； 属性 已被使用，因此它会相应地对齐自身并给出 12px 的默认填充。
降低父元素的高度，我想你可以开始了！