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?

This snippet should work, for both the Edit Mode (.cm-header-1), and the Preview Mode (.markdown-preview-view h1). However, it does not work in Edit mode. Maybe someone else can add what is needed.

I played around with it a bit and I did get it to pad or margin the left side, so I know its possible, but for some reason the Top pad or margin will not work in Edit Mode.

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

Figured it out…

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

1 Like

:smiley: Thanks a lot! I have no idea what kind of class that is, but it looks exactly how I wanted it to look! I really appreciate your help - this bugged me for quite some time.
Have a good week!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.