How can I remove the blank line that appears before a bullet list in read mode?

Custom CSS & Theme Design
1

What I’m trying to do

Remove the blank space between a bullet list and text above it that appears in read mode.

image

Things I have tried

Creating a CSS snippet but I’ll be honest I’m new to CSS and Obsidian and I’m not at all sure I did it right. I could really use some help.

2

You could try adjusting the --p-spacing and/or --heading-spacing like here:

3

Thanks for the suggestion but so far it’s only affecting headings not bullet lists. I’m not well versed in CSS so a step by step would be greatly appreciated.

4

In this specific case (a list following regular text), this works to shift the list up in Reading View:

.markdown-rendered ul, .markdown-rendered ol {
    margin-block-start: -10px;
    margin-block-end: 0px;
}

…but this could very well produce unexpected results in other situations, negative margins aren’t good, and I wouldn’t use it myself.

Reading View is going to create lines/spacing between elements. I’d try working with the --p-spacing or --heading-spacing options. For spacing within lists, you could also try the CSS here How to Increase Paragraph Spacing - #2 by ariehen.

1 Like
5

I use this snippet in conjunction with the Contextual Typography plugin. The plugin might not be strictly necessary anymore, but it’s worked for me for ~2 years now.

/* Remove the gap between a paragraph and a list that follows it */
div.el-p + div.el-ul > ul,
div.el-p + div.el-ol > ol {
    margin-top: -15px;
}
2 Likes
6

Thank you so much, bro! That’s exactly what i was looking for.
As i’ve noticed so far, this doesn’t change anything else, right?

7

I exported a page to PDF recently, and it used the Reading mode view for the export, so blank lines after headings. Not what I was hoping for. Does anyone know why there is a space after headings in RM? I wish there was an option to remove those blank spaces!