Heading spacing settings in Style Settings

[dkeiger1]

First, search the help docs and this forum. Maybe your question has been answered! The debugging steps can help, too. Still stuck? Delete this line and proceed.

What I’m trying to do

I want to reduce the space between headings and subsequent text in reading mode. I use the Minimal theme, and when I open the appropriate Style Settings and enter a new setting (say, 1em instead of the default 2em), nothing changes in reading mode. Am I missing something? Thank you.

D

Things I have tried

[ariehen]

I believe Minimal’s Heading spacing option only adjusts this:

--heading-spacing defines the spacing above a heading when it follows a paragraph (defaults to 2.5x paragraph spacing).

For directly under the headings, is seems you need work with the heading margin-bottom and paragraph top margin. Without using negative values (which you can do but probably shouldn’t), you could give this a try:

.markdown-rendered div:has( > :is(p,pre,table,ul,ol)) + div > :is(h1,h2,h3,h4,h5,h6) {
    margin-bottom: 5px;
}

.markdown-rendered p {
    margin-block-start: 0px;
}

Before:

After:

I haven’t checked every scenario with this, but you can always adjust it (or not use it) if you see any weirdness in other places.

[dkeiger1]

Thank you so much. Exactly the effect I want. One question: Do I use this as a CSS snippet? Or do I go into the theme CSS and edit that?

[ariehen]

Unless you are making your own theme, you’ll always want to use a snippet. If you alter the theme CSS file itself, any time there’s an update (in the past few days Minimal has had a few), your changes will be overwritten.

https://help.obsidian.md/Extending+Obsidian/CSS+snippets

The .css file(s) be named anything, and you can put multiple snippets in one file. I tend to group similar snippets into one file, but it’s all up to you.

[dkeiger1]

That’s what I thought, but I was trying not to overestimate my scant knowledge. Thank you again.

D

[suzannah]

Hello! This is actually my first reply. This snippet was amazing and when I updated today it wasnt working, and I popped into the code to find out what was up and realized a bunch of the internal classes had their names changed, particularly p, pre, table, ul, and ol. they are now el-p, el-pre, el-table, el-ul, and el-ol. Anyway, here’s what worked for me.

.markdown-rendered div:is(.el-p, .el-pre, .el-table, .el-ul, .el-ol) + div > :is(h1,h2,h3,h4,h5,h6) {
    margin-bottom: 1px;
}

.markdown-rendered p {
    margin-block-start: 0px;
}

Again thank you so much for this snippet in the first place! I hope my css is helpful, I am no expert.

[suzannah]

EEK i forgot to add something for the horizontal divider lines and the callouts too. because I used the “is” i have to be super specific. if you dont add them to the list, then the text under the headings that come after them go back to the default. UGH.

.markdown-rendered div:is(.el-p, .el-pre, .el-div, .el-hr, .el-table, .el-ul, .el-ol) + div > :is(h1,h2,h3,h4,h5,h6) {
    margin-bottom: 1px;
}

.markdown-rendered p {
    margin-block-start: 0px;
}

I am sure the moderator would like this to be closed at some point, lol, a year later and all, so i guess the rule is that if you see the paragraph text after the header go back to its original spacing, look just above that header and see what is there. my code covers callouts, code blocks, lists (bullet and numbers), horizontal divider lines, h1,h2,h3,h4,h5,h6, tables and other paragraphs. If what is directly before the header (they header that has default spacing after it in the paragraph text) is not one of those I covered, go into the DOM inspector, find what the new selector name is, and add it to this list.

(maybe someone smarter than me knows all of the class names or knows a more encompassing way to do this)

Thanks yall!