Solution 1 :

That space is coming from vuetify css:

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

If you go into the dev console and disable that line you will see the spacing goes away.

You will need to override that css with a more specific selector.

CSS specificity

Solution 2 :

If you try increasing the padding from 12, it will show changes, but when you reduce it from 12 there are know changes, so the only possibility is that the parent has been given a particular height and its a flex box and the align-items:center; property has been used, hence it it aligning itself accordingly and giving a default padding of 12px.

Reduce the height of the parent element, and I think you’d be good to go!

Problem :

This codepen example shows a very simple Vuetify list containing 3 items. I would like to reduce the amount of whitespace above/below each item in the list.

I’ve inspected the markup and noticed that there is 12px of vertical padding applied to each

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

that’s created by each

<v-list-item-content>

But if I set this to 0px, the whitespace is not reduced. I think the cause of the problem is that each of these elements has a height of 61px, but for some reason it does not seem possible to change this (the property is greyed out in Chrome dev tools).

I guess there’s some flexbox property I should be setting instead, but I’m not sure which one.

Comments

Comment posted by Antonio Dragos

Thanks very much, this sounds like a job for…..

Comment posted by Rob Moll

I would try to solve by being more specific and use !important as a last resort.

Comment posted by Community

Please provide additional details in your answer. As it’s currently written, it’s hard to understand your solution.

By