Live Preview: Add margin-top to H1-H6?

[renfield]

Live Preview is awesome! Just one thing:

How can I achieve a space above the headlines that is created with css instead of adding an empty line?
I used to work with the css-addon by @Obsidandnancy - here:

Add margin-top to H1-H6 in edit-mode?

What I’m trying to do I like working in edit mode, and want a margin to appear above each headline so I don’t have to put in an empty line to create a space to make the paragraphs more readable. Instead of [image] I would like to see [image] I haven’t found a way to make this work. I added this as an additional css-file, but it only affects the preview-mode. h1,h2,h3,h4,h5 {margin-top: 2em; !important} Can anyone help?

Unfortunately, it does not work anymore.
Thanks for any help!

[Obsidandnancy]

Hi @renfield, this still works for me in Edit Mode as well as Preview Mode. Maybe your theme or a plugin is styling the headers as well now.

.cm-s-obsidian pre.HyperMD-header-1, .markdown-preview-view h1 {
padding-top: 80px !important;
}

Odd as it might seem, someone recently had a case where removing the !important solved the issue.

TRY:
.cm-s-obsidian pre.HyperMD-header-1, .markdown-preview-view h1 {
padding-top: 80px;
}

[renfield]

Hi @Obsidandnancy , thanks for your suggestion! Unfortunately, it doesn’t work on my PC anymore, though I disabled all external plugins and tried the Obsidian default theme (and Blue Topaz which I normally use). I tried css with !important and without. :-/

[Obsidandnancy]

One more try… this is a slightly more formal snippet coding.

.cm-s-obsidian pre.HyperMD-header.HyperMD-header-1, .markdown-preview-view h1 {
padding-top: 80px !important;
}

[renfield]

Wow, thanks a lot for your effort!
It works in edit mode and preview mode!
Would be great, if it would as well work in the „Experimental Live Preview“-mode.

[JayKim]

I agree, I really hope it will be possible eventually to have the same header style in live-preview as in the normal preview mode. I was expecting it, because they were comparing this WYSIWYG thing with Typora.

[renfield]

I found a solution today, thanks to @EleanorKonik s fantastic Obsidian-Newsletter, where she wrote that

the new Live Preview mode changes the pre.HyperMD-codeblock element to a div.HyperMD-codeblock

So I changed my header-styling css to

.cm-s-obsidian div.HyperMD-header-1, .markdown-preview-view h1 {
padding-top: 2em; !important; color: red;
}

Now it looks as I imagined it. Thanks!