Can I set default line spacing before and after headings?

Help
1

I’m trying to do very simple global/default formatting of heading level H2 so that for example there are perhaps 2 lines before and one line after an H2 heading. I’ve tried various searches in the forum and with Google and so far have only found topics on more complicated heading format issues, nothing on simple line spacing. Thanks

2

Search for heading spacing on the forum. May want to include CSS in the search.

3

I did quite a few searches before posting the question. I suspect I’ve got my answer, there is no simple way (simple as in simple for a new user, not Obsidian or css expert lol) to establish a global default using existing features or plugins. No big deal, only I see these notes. I invested quite a bit of time getting up to speed on the basics, maybe I’ll dig into complex customizations later when I can invest additional time in this. Thanks

4

It’s not too complicated.
Paste this into an empty file that you can save out with a .css extension. Give it a name you can easily remember or recognize next time you want to tweak it, put the file in the .obsidian/snippets folder of your vault and activate the snippet (here’s how).

.markdown-preview-view h1 {
  padding-top: 30px;
  padding-bottom: 30px;
}
.markdown-preview-view h2 {
  padding-top: 30px;
}
.markdown-preview-view h3 {
  padding-top: 30px;
}
.markdown-preview-view h4 {
  padding-top: 30px;
}
.markdown-preview-view h5 {
  padding-top: 20px;
}
.markdown-preview-view h6 {
  padding-top: 20px;
}
/* DON'T NEED THESE; THEY ARE ONLY FOR LIVE PREVIEW */
/* .mod-cm6 .cm-editor .HyperMD-header-1 { */
/* padding-top: 20px; */
/* padding-bottom: 20px; */
}
/* .mod-cm6 .cm-editor .HyperMD-header-2 { */
/* padding-top: 20px; */
}
/* .mod-cm6 .cm-editor .HyperMD-header-3 { */
/* padding-top: 20px; */
}
/* .mod-cm6 .cm-editor .HyperMD-header-4 { */
/* padding-top: 20px; */
}
/* .mod-cm6 .cm-editor .HyperMD-header-5 { */
/* padding-top: 20px; */
}
/* .mod-cm6 .cm-editor .HyperMD-header-6 { */
/* padding-top: 20px; */
}

You can play around with the numbers to increase the padding. If you want to change it for Live Preview as well (I did not), remove the slash-star pairs around the code on the bottom.

3 Likes
5

Thanks, worked like a charm! I appreciate your time.

1 Like
6

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