Struggling with CSS for Paragraphs for Writers

[augustine]

I’ve tried the following as a .css file (ParagraphSpacing.css), added it to the CSS folder in settings > appearance, toggled it on, quit and reopened Obsidian, and no spacing occurs between paragraphs.

I love markdown’s simplicity, but get very frustrated at how unfriendly simple bits like indenting first lines are (willing to settle for paragraph spacing) and how a tab make is code. So close, yet so very far. (venting cross application frustration here), but it mirrors other writers comments here … we are not tech savvy … I write first drafts pencil to paper in cursive. Sardonic grin. Help appreciated.

.markdown-preview-view br {
content: ‘’;
display: block;
margin-top: 10px;
}

.CodeMirror pre.CodeMirror-line {
padding-bottom: 10px;
}

[CawlinTeffid]

Where did you get this CSS from and what is it trying to do?

[ariehen]

The first section, .markdown-preview-view br, is working but you’ll only see the results in Reading view and if there are line breaks. A backslash \ at the end of the line or two spaces and a return. Here’s with

.markdown-preview-view br {
    content: '';
    display: block;
    margin-top: 50px;
}

left: Source mode | right: Reading view

The .CodeMirror part isn’t doing anything. It’s old and doesn’t seem the right selector for what you want to do here.

---

The following snippets have a cssclass of writing so we’re not changing all notes. Add writing to the YAML/Properties of the notes you want to change. writing can be changed if need be.

Live Preview:

---

Add this change the line height if necessary, but it can be skipped:

.writing {
    --line-height-normal: 1.8; /* default is 1.5 */
}

And the rest to take care of the margins (Reading view) and paddings (the editor):

/* line height for all viewing modes */
.writing {
    --line-height-normal: 1.8; /* default is 1.5 */
}

/* reading view */
.markdown-preview-view.writing br {
    content: '';
    display: block;
    margin-block: 1.5em; /* px values are fine here as well */
}

/* editor */
.markdown-source-view.writing .cm-line:not(.HyperMD-list-line, .HyperMD-codeblock, .HyperMD-callout) {
    padding-block: 1em;
}

left: Live Preview | right: Reading view

Of course things may need adjusting, but you could give this a go to start. Hopefully it’s going in the direction you are looking for.

[augustine]

I got it from the Meta CSS Snippit thread.

[augustine]

Thank you. I’ve no idea what you just said, which itself is my answer. I am grateful for your help.

[CawlinTeffid]

It sounds like your snippet might not work in part because it predates the big redesign Obsidian underwent for version 1.0, or perhaps predates some smaller update that changed something it depends on. (Check the date on the post you copied it from.)