Get rid of margins at tops and bottoms of lists? With CSS?

Lounge
1

I'm trying to be able to have text either directly above or directly below a list item without the resemblance of a blank line (although it's actually some kind of margin), or any other strange formatting in the case of text directly below a list item.

Here's how the items are written in the Markdown editor:

image

And here's how that renders in the Markdown previewer/WYSIWYG:
image

Is there some CSS I can use to make it so there's no margin on top of the first item in a list? I tried:

ul {
  margin-top: .25em;
}

and I also tried

div#rendered-md {
    /* Root of the rendered Markdown.     */
 margin-top: .25em; 
}

but these don't have any effect.

2

Sorry for the late reply, I am new to Joplin, but the padding felt awkward to me as well. What you're looking for is the property margin-block-end (as well as margin-block-start if you're keen on symmetry) for both ul and p. The CSS in this case might look like this:

ul {
    margin-block-start: 0.2em;
    margin-block-end: 0.2em;
}

p {
    margin-block-start: 0.2em;
    margin-block-end: 0.2em;
}

Consider trying a handful of values and settle on what feels natural to you.

2 Likes