Inconsitent space below headings

[nousernameavailableanymore]

The space below a heading is inconsistent between reading mode / Live Preview.

When using CSS to adjust the space, it even becomes inconsistent between reading mode / Live Preview and embed preview. The difference in embed preview seems to come from the "margin-bottom: -0.2em", which only decreases the gap in reading mode a tiny bit but completely removes the gap in embed preview.

CSS used for affected heading:

.markdown-preview-view h1 {
    color: var(--sne-gold-trans);
    text-align: center;
    vertical-align: middle; 
    background-color: var(--code-color);
    margin-bottom: -0.2em !important;
}

.HyperMD-header-1,
.cm-header-1 {
    color: var(--sne-gold-trans);
    text-align: center;
    vertical-align: middle; 
    background-color: var(--code-color);
}

[ceciliamay]

Hey there @nousernameavailableanymore ! I just looked into this and I don't seem to have the inconsistent spaces you've mentioned 🤔 Here's what they look like on my end:

(by Editor, I mean Live Preview)

they look fine on embed preview too

What fixes have you tried? If you haven't, can you try:

• reinstalling Primary?
• reinstalling Obsidian?

Let me know how it goes!

[nousernameavailableanymore]

Hmmm not sure what you mean. Counting pixels (lowest pixel in header background to highest pixel in text beneath) in photoshop shows for my examples: 17 in Live Preview 35 in Reading Mode

Doing the same for your examples shows: 23 in reading mode 35 in editor view

So while the difference is not AS large as in my example (maybe related to font?), even in your example, the gap in editor view is still more than 50% larger than in reading mode.

[ghtyrant]

The same is happening for me, on two different installations of Obsidian. I already tried disabling all CSS snippets, but that does not fix it. Headers seem to lack spacing below in edit mode:

In reading mode, spacing seems to be better:

[ceciliamay]

Hey there @ghtyrant ! Unfortunately due to how Obsidian renders Live Preview and Reading Mode differently, the only solution is to add an empty line after every header/paragraph. There is currently no other workaround code-wise, and even big themes like Minimal have the same issues. I'm hoping for better visual consistency in Obsidian's rendering in the future! Hope this helps 🙏

[ghtyrant]

Thanks for your response. Too bad this can't be fixed otherwise, but I'll just add newlines for now.