I am curious why in Joplin the default CSS pads the bottom of a Bold line with an empty line, but does not pad the top.
Some of my documents instead of headers use bold for the first line of a new section of the page. The markdown view of these documents look odd because it appears that the bold line belongs to the previous section.
I can transition to headers, but Im curious why the default behavior is to add padding to the bottom but not to the top.
Could you demonstrate what you are seeing (markdown editor, rendered view etc.)? I don't see any padding or margin differences with bold text vs plain text.
After playing around with it some more it appears this has nothing to do with bold, but its because of the usage of bulleted lists.
This is how it is entered in the editor:
- This is some text from a previous section
**This is some text from a new section**
- This is some more text from a new section
How this appears in the view:
This is some text from a previous section
This is some text from a new section (except not indented)
This is some more text from a new section.
So, in Joplin, the inital line of a bulleted list adds an empty line above it. It doesn't do this in this editor.
I had a test and it actually appears better in joplin than in the forum software (above)
Here the bold text is properly placed inside it's own paragraph, above it is joined to the list above (which is wrong).
As for your issue. It looks like it's actually the padding underneath the bold text (which is a paragraph).
This typically looks good, but in your case it can be a bit weird
I think the problem is that the first entry in a list has too much padding above it.
As @CalebJohn mentioned, the margin belongs to the paragraph, not the list items, the list item itself only has a tiny amount of padding beneath it.
The styles can be fairly easily tweaked with css, so if you wanted all of your paragraphs to have equal top and bottom margins you could use the following in your userstyle.css:
p {
margin-bottom: .6em;
}
to get:
You can’t do that in the iPhone or iPad?
Correct, the CSS tweak is only on the desktop app, there currently isn't a way to apply custom styles to the mobile app.
Going back to your solution with css you have only fixed one of the issues - there is no distinct separation between the two lists. To do that would require increasing paragraph's top margin so that my entry 2 didn't run into the Second list description?
To my mind the text above a list isn't a paragraph requiring separation from the list, it's a list description which needs to be bound to the first entry.
Thanks -- I think this looks cleaner than the default style. Although it would be nice to have something to better separate the two lists as the others have said.
I'm not sure there is anything in Markdown itself to resolve it, most implementations seem to use the equal margin approach:
Atom markdown-preview:
MarkText:
GitHub:
Discourse:
First list description
Second list description
There really isn't much in markdown to allow you to say that a given paragraph "belongs" to the text either preceding or following it (other than of course using headers which is after all their purpose) and any tweaking you do to the margins will affect all paragraphs in your notes, not just those relating to list items.
Using the default settings with headers I think makes it obvious:
You can of course use other features like *** to make a <hr> line to make the separation obvious, e.g.:
Thanks @Daeraxa for the very thorough replies. I am going to go with headers and a single period which gives me the separation I want. The period (dot) can hardly be seen!
