减少Vuetify列表中项目之间的垂直空白

Question

这个相互依存的例子展示了一个非常简单的Vuetify列表，其中包含3个项目。我想减少列表中每个项目上面/下面的空白量。

我检查了标记，注意到每个

都有12px的垂直填充

<div class="v-list-item__content">

由每个 创建的

<v-list-item-content>

但是如果我将其设置为0px，则空白不会减少。我认为问题的原因是，这些元素中的每一个都有61px的高度，但出于某种原因，它似乎不可能改变这一点(该属性在Chrome开发工具中变灰)。

我想我应该设置一些flexbox属性，但我不确定是哪一个。

Answer 1

该空格来自vuetify css:

.v-list--two-line .v-list-item, .v-list-item--two-line {
min-height: 64px;
}

如果您进入开发控制台并禁用该行，您将看到空格消失。

你需要用一个更具体的选择器覆盖这个css。

CSS特异性

Answer 2

如果你尝试从12开始增加padding，它会显示变化，但是当你从12开始减少它时，有已知的变化，所以唯一的可能性是父元素已经被给定了一个特定的高度，它是一个flex box和align-items:center;属性已经被使用，因此它会相应地调整自己，并给出一个默认的12px填充。

降低父元素的高度，我认为你会很好!👍🏻