如何减小Vuetify列表中各条目之间的垂直空白间距

问题原因 #

你看到的.v-list-item__content高度无法修改是因为它的父元素<v-list-item>对应的.v-list-item类默认设置了min-height属性，这个属性优先级更高，把整个条目高度撑住了，所以单独修改子元素的垂直padding不会生效。

解决方法 #

• 方法1：使用Vuetify内置紧凑模式
  只需要给<v-list>标签或者单个<v-list-item>标签添加dense属性即可，框架会自动下调条目最小高度和内边距，适合只需要小幅缩小间距的场景。
• 方法2：自定义间距大小
  先给你的列表添加自定义类名避免全局污染，比如<v-list class="custom-narrow-list">，再添加如下CSS规则即可按需调整间距：

  /* 调整条目最小高度 */
  .custom-narrow-list .v-list-item {
    min-height: 36px; /* 可根据需求自由调整数值 */
  }
  /* 调整内容区域上下内边距 */
  .custom-narrow-list .v-list-item__content {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  

  不需要添加!important，只要选择器优先级高于Vuetify默认规则即可生效。

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