CSS Paragraph spacing not working in preview mode

Things I have tried

I’m trying to add paragraph space in Edit AND preview mode to the default template.

So far, I’ve tried to do with the snippet below and it works in Edit mode but not in preview mode :frowning: In preview mode I have a space above and below a group of text but nothing between 2 paragraphs. Can you help please?

.markdown-source-view :is(.cm-line + .cm-line) {
padding-top: 0.4em !important;
}
p {
padding-top: 0.4em !important;
}

see if there’s another snippet that actually has even higher specificity (precedence)

Ctrl/Cmd + Shift + I to open the dev console, click on the “cursor icon” to allow u to select element in the notes, hover and click on a sample paragraph, and look at the “Styles” tab on the right bottom (placement might be different).

If somehow some other css trumps what u have, it will have a cross out (like the scrollbar-width: thin in the screenshot). Btw i use 1.4em in my example so that i can easily see.

1 Like

Thanks a lot for the help. Great tip, indeed.
Unfortunately, it does not solve the issue. Adding a snippet with margin-top or padding-top to p definitely increases the space before and after the whole text group but does not add space between paragraphs in preview.
Edit mode:


Preview mode:

Any idea?

can u give a screenshot similar to how i did above? i still think that the snippet didn’t get properly applied to your reading view.

FWIW, your reading view spacing is different from even the default theme. Did u by any chance Shift+Enter to create new line (or use mobile/tablet/ipad toolbar keys instead of external keyboard) to enter new line? I suspect in reading view that whole four “paragraph” u have is just inside one (1) <p> tag. Anyhow, doing like my screenshot will help give some info which is which.

1 Like