Spacing between headings when toggled closed

[acxyz]

Things I have tried

• Looked throughout settings, can’t find anything
• Looked for a community plug-in (inc. Minimal theme settings), can’t find anything
• Looked throughout forum, can’t find

(could be being blind on all of the above!)

What I’m trying to do

When I close a heading, I want to have 1 line (or at least equivilant, even if it isn’t techincally a line) spacing between the headings. To be clear, when the headings are open I don’t want this to be the case (i.e. changing my spacing system wide won’t solve this issue).

Example:

Current situation:

When Open
Heading 2
Some text
Heading 2
Some text

When closed:
Heading 2
Heading 2

Desired Outcome:

When Open
Heading 2
Some text
Heading 2
Some text

When closed:
Heading 2

Heading 2

–
Essentially, what I want to avoid is when I have a document with a large number of headings which are closed, it doesn’t look like this

Heading 2
Heading 2
Heading 2
Heading 2
Heading 2
Heading 2
Heading 2
Heading 2

In a dream scenario, I’d be able to configure these settings on a Heading level (i.e. have different settings for a H2 & H3) but let’s walk before we can run!!

Any feedback much appreciated, thanks

[Dagaloni]

I am / was looking for this as well. What I ended up doing is apply a margin-top to every heading.

body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-vertical.mod-root > div > div.workspace-tab-container > div.workspace-leaf.mod-active > div > div.view-content > div.markdown-source-view.cm-s-obsidian.mod-cm6.is-readable-line-width.is-folding.is-live-preview.node-insert-event > div > div.cm-scroller > div.cm-sizer > div.cm-contentContainer > div > div.HyperMD-header {
  margin-top: 1em !important; 
}

This article explains how to add custom CSS to your theme.

[ZenMoto]

This should do exactly what you are asking:

/* h1 */
.HyperMD-header-1 > .cm-fold-indicator.is-collapsed { 
    margin-bottom: 1em; 
}

/* h2 */
.HyperMD-header-2 > .cm-fold-indicator.is-collapsed {
    margin-bottom: 2em;
}

Replicate for h3-h6.

Your dream scenario has come true…

[laikoni]

Thanks a lot, I was also looking for this.

There is still one last issue I encountered: In case a heading is very long and breaks over the margin, the space is inserted in between the two lines of the heading, but not after it.

### Here is a collapsed heading
test
### But here is a very long collapsed heading that unfortunately breaks over the margin 
test
### And here is another short heading
test

Just from the CSS I don’t see why this would happen, so is this maybe a display bug? Or can the CSS be adapted to cover this case as well?

[ZenMoto]

Sure, that is possible. Here you go @laikoni

/* target all folded headers */
.HyperMD-header > .cm-fold-indicator.is-collapsed ~ img.cm-widgetBuffer:last-of-type { 
    margin-bottom: 1em !important; 
}

Or - to target a specific header:

/* h1 (folded) */
.HyperMD-header-1 > .cm-fold-indicator.is-collapsed ~ img.cm-widgetBuffer:last-of-type {
    margin-bottom: 1em !important;
}

/* h2 (folded) */
.HyperMD-header-2 > .cm-fold-indicator.is-collapsed ~ img.cm-widgetBuffer:last-of-type {
    margin-bottom: 1.5em !important;
}

**

RESULT:

- peace to you -

[twwilliams]

This works beautifully. Thank you.