How to remove margin after/below list heading?

Things I have tried

Adding custom css for .contains-task-list. No change.

What I’m trying to do

Remove margin/space between list heading and first bullet point in Preview. To “tighten” up list → similar to edit mode.

Thanks in advance!

image

2 Likes

Did I post this in the correct area/forum? Should it go in CSS?

1 Like

Hey, yeah you posted it in the correct place, don’t worry

Here’s the code:

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: -15px;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

You can play around with the number I determined here

    margin-block-start: -15px;

Choose the number that fits your taste. I included the other values in case you want to change the end margin or anything else.

For visual reference

Before

After

Just for future reference you can figure this out by using the Inspector, there’s great info about it here:

Getting comfortable with Obsidian CSS

3 Likes

Hi… Thanks for reply!

I had tried changing the ul css already, but it ends up changing all sub-list items in the main ul also -
image

I was wondering if there was a way to specifically target a list heading’s and modify only that css?

2 Likes

You could try to use the adjacent sibling combinator to only change the margin-block-start of lists that immediately follow a heading.

h3 + ul {
margin-block-start: -15px;

Thanks for the reply!

I’ve tried the “h2 + ul” combinator but no joy. This only happens in Preview mode, so I’ve tried target .markdown-preview-view. But no change.

Any update on how to fix this? I also would like to change the spacing below the list header. Thanks!

Hi, I’ve worked with the alternatives given up to now and I think I’ve got it:

Create a css snippet with the following content, and activate it:

/* set the upper margin for the list */
ul { margin-block-start: -1em; }

/* reset the upper margin for nested lists  */
ul ul { margin-block-start: inherit; }

Note: 1em is the browser’s default. You may adjust this value to whatever css unit you find appropriate, maybe 18px.

For better understanding, I leave you a screen capture setting a different background-color for each rule:

1 Like

Thanks for the info! That seems to work really well for me for the first indent of the list, but the sub-indents drop down a space… is this where I need to input something other than the default spacing, or is there some other issue?

1st photo = preview mode, 2nd photo = edit mode

Are you using a plugin for lists in edit mode? It looks very different from the default representation of lists, as seen in my screenshots.

Try it without any plugins

This worked for me (with no active plugins). Thanks!

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