How to reduce margin between header and dataview lists & tables

What I’m trying to do

Reduce the space between a line of text and a data-view query on the following line.

CleanShot 2023-09-29 at 12.28.43

Things I have tried

I have searched the forum and tried a couple of CSS snippets, but no solutions.

The CSS will, of course, vary depending on a few things.

Are you using a community theme? If so, which one?
Do you want to reduce the spacing in Live Preview, Reading view, or both?

You could give this a try to start. You should see a change in Live Preview and Reading views.

.markdown-rendered ul.dataview.list-view-ul {
    margin-block-start: 0.5em; /* default is 1em */
}

I’m having the same problem. I guess the author used the minimal theme. If I want reduce the spacing in reading view, how should I write the custom css code? Many thanks!

PS: I’ve tried the codes you provided, it made a difference in the live preview mode, but not much of an effect in Reading view.

Hmm. Not sure. Here’s from a vault with only Minimal and Dataview installed. The Dataview query is

```dataview
list 
from "imafolder"
```

and in Reading view with the above CSS (targeting only the top of Dataview rendered lists).


Not specifically for Dataview rendered lists, but you could try changing or replacing the values in these custom properties as well. Reading view is where you’ll see most of the changes.

  • --p-spacing defines the spacing between paragraphs (defaults to 1rem).
  • --heading-spacing defines the spacing above a heading when it follows a paragraph (defaults to 2.5x paragraph spacing).
body {
    --p-spacing: 0.6rem; /* default is 1em */
    --heading-spacing: calc(var(--p-spacing) * 2.5);
}

2 Likes

Yep, seems to work. Thanks for the help!!

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.