How to Increase Paragraph Spacing

[WQR]

What I’m trying to do

I would like there to be more spacing between pargraphs. This is especially important for bulleted lists as they will be much easier for me to read.

Things I have tried

I added this to the bottom of theme.css. It made no difference.

[ariehen]

A few things that pop out:

• Don’t edit the theme.css file, it will be overwritten anytime the theme updates. Use CSS snippets - Obsidian Help instead.

• Obsidian has a Reading View and Editing View (which includes Source Mode and Live Preview). The CSS used is different for these views. However, there are custom properties/variables that cover both views.

• Bulleted lists are considered lists, not paragraphs, so you’ll want to target lists if you want to increase the vertical spacing between the bullet points.

You could try this (tested with the default and Minimal themes):

/* vertical spacing between list items - default value: 0.075em */
body {
    --list-spacing: 0.5em;
}

CSS variables - Developer Documentation

---

For paragraph and header spacing, have a look here:

Need help with the distance between the headers and text using minimal theme

If you are using Obsidian v1.3.7+, there are some new theme variables to play with having to do with spacing. They work as is with Minimal. You’ll see a change of --p-spacing in both editing and reading modes, and --heading-spacing only in reading mode. /* default vaules */ /*body { --p-spacing: 1rem; --heading-spacing: calc(var(--p-spacing) * 2.5); }*/ body { --p-spacing: 1rem; --heading-spacing: calc(var(--p-spacing) * 1); } You could give those a try (adjusting the values …

[WQR]

Thanks for your reply! My lists are looking great now.

But I may not be technical enough to understand some of your other points about reading view vs editing view and the CSS variables link.

Can you tell me what is happening here? i.e. I’d like Lines 1 and 2 to separate the same way the bulleted list items are separated.

[ariehen]

Right, yeah, I was just trying to make clear that something like your original p { margin-bottom: 50px; } will work on a web page and maybe Reading view, but probably not do what you want because of the way Obsidian is structured.

The --margin-bottom in your second screenshot doesn’t exist, so that’s not going to do anything.

Did you try the paragraph and heading CSS I linked to? That should cover Reading View at least (for the spacing of paragraphs after each other). You might not see much in Live Preview depending on what else is in your note.

You could give this a try as well:

Can't get custom CSS to work

Ooops! I was missing a bracket. So, I would call this “writers mode” for Obsidian - so that text is formatted in a way which is pleasing to writers - a bit of breathing space between paragraphs (but not between items in a list, or in a code or callout block). And here are the instructions again. Go to Settings / Appearance / CSS Snippets. Click on the folder icon. In the folder that opens create a file with a .css ending and paste the following (it’s best to use a code editor like Brackets): …

[WQR]

Thanks for your help!

I’m not sure if I actually did this “properly” or not, but Obsidian looks pretty much exactly like I want with the following.

[ariehen]

All looks good with the CSS. Well done! If you are curious, all the :not stuff is just saying "don’t apply this rule to lines of lists, code blocks, or callouts in Editing view (you probably got that).

It’s really subjective how far someone wants this apart from that, but if it looks good to you in Editing and Reading Views… great!