Removing whitespace at paragraph breaks

[BlueSky]

Adding or removing whitespace in markdown doesn't affect the rendered text. The problems are

1. No gap between the two lists
2. There is a gap between the list titles and the list items

I believe the second problem is because the list title and list items are separated by a paragraph break, so Joplin adds extra space. I there a way to to remove the extra space?

OS: Windows 11
Joplin Version: 2.6.10

Edit: spelling

[whitewall]

Welcome to the forum!

Do you know about modifying the css in the userstyles.css file?

Also under Help>Toggle Development Tools is a way to see what's going on under the hood.

I was able to fix number 2 by making the list title a h6 and then removing the lower margin of that and also removing the top margin of the list element.

I guess number 1 would be fixed by adding either a top margin to h6 or bottom margin to the list.

But there are many people far more knowledgeable in Joplin CSS than me. You may want to search the CSS threads and post to one of them.

[BlueSky]

I am new to markdown so I barely know how to edit a text file

I went to the folder where I installed Joplin and searched for the .css extension but did not find anything. When I toggle development tools I see an .html file under the Elements tab. Is this the .css file?

I searched ctrl-f for "list title" and found the following snippet of code but am not sure what to edit.

[whitewall]

Ah, start by checking out this post:

Introduction to customising Joplin (userchrome.css & userstyle.css)

Joplin has several internal stylesheets that control what Joplin looks like to the user. However two have been provided that allow the user to customise the app. Joplin uses its built-in styles but these two files can be used to override those styles. These files are just like the Cascading Style Sheets (CSS) used when creating web-sites. The files are called userchrome.css and userstyle.css. userchrome.css allows styling of the app itself, including the Markdown Editor, userstyle.css allows s…

If you have questions after that, feel free to ask.

[BlueSky]

Thank you! The userstyle.css file is accessed using
Tools > Options > Appearance > Show Advanced Settings > Custom stylesheet for rendered Markdown

I added the following code to the userstyle.css file to fix problem 2:

p.maps-to-line {
    margin: 0px 0px 3px
    }
p {
    margin: 0px 0px 3px
   }

This changes the margin space from 20.25px to a more reasonable 3 px. The first change is for markdown view and the second change is for rich text view.

Regarding problem 1, there does not appear to be a way to add empty paragraph breaks between lines. The issue has been raised before but never received a response.

Therefore, I did what @whitewall suggested and added space to the end of every list.

ul {
    margin: 9px 0px 26px 25.5px
}

ul.joplin-checklist {
    margin: 9px 0px 26px 25.5px
}

This increases the margin space at the bottom of every list from 9.75px to 26px. The first change is for markdown view and the second change is for rich text view. This fixes both checkboxes and bullets.

Edit 1: Added fix for problem 2 in rich text view.
Edit 2: Added fix for problem 1.

[whitewall]

Wow, you went from "barely know how to edit a text file" to making customizations really quick! Great work and again welcome to the community.

[BlueSky]

Thanks! The tutorial you linked explained everything very clearly. I find being able to read and use the internet is the key to learning almost any other skill.