Heading (top&bottom) spacing through CSS

Help
#1

Hi Obsidian community! :blush:

I am a daily and happy user of Obsidian!
I managed to tweak the CSS parts for my theme to look fine to me.

One thing that I cannot yet figure it out is how to control the margins of some headings, especially in the editing mode which I mainly use.

For example, in my .obsidian/themes/Behave\ dark.css file I have, for example for H3 heading this rule:

/*********************************/
/* Headings - EDITOR and PREVIEW */
/*********************************/

/* headings for editor and preview */

.cm-header-3, .markdown-preview-view h3
{
  font-family: var(--font-family-editor);
  font-weight: 500;
  font-size: var(--font-size-h3);
  color: var(--text-title-h3);
  margin: 200px 0 100px 0;
}

In editing mode it doesn’t look as being applied:
image

but in reading mode it looks like being applied:

image
image334×542 5.86 KB

Am I missing something? I’d really want to control the spacing of these headings in reading mode, whether expanded (by default) or collapsed. I’ll keep looking for an answer meanwhile …

Thanks!

#2

.cm-header-3 is a span element, where margin top or bottom does not apply.

U need .cm-s-obsidian .HyperMD-header-3. I add .cm-s-obsidian to make sure it trumps over app default setting.

For ur better understanding the html dom looks like this (I’m typing from memory, so might be a bit off)

<div class="HyperMD-header-3">
<span class="cm-header-3">Header 3</span>
</div>