Heading (top&bottom) spacing through CSS

[dxps]

Hi Obsidian community!

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:

but in reading mode it looks like being applied:

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!

[efemkay]

.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>

[dxps]

@efemkay Thanks for the feedback!
Sorry to reply that late, but I expected to get an email when a reply appears. That’s not happenning by default, so I updated the notification preferences meanwhile.

I tried you suggestion:

KB/.obsidian/snippets ❯ cat headers_vert_spacing.css 

.cm-s-obsidian .HyperMD-header-3 {
  font-family: var(--font-family-editor);
  font-weight: 500;
  font-size: var(--font-size-h3);
  color: var(--text-title-h3);
  margin: 300px 0 200px 0;
}

KB/.obsidian/snippets ❯ 

and enabled this in Settings > Appearance > CSS Snippets, but unfortunately no changes.
I tried also to have this included in the theme file, still no changes.

Any other ideas, please

Speaking about understanding , how can I find all these CSS rules that are being used in Obsidian
I used to use Typora before, and that had the option to enable DevTools and then you get all those relevants insights (same as you can do in VSCode). In such cases it’s easy to discover how the presentation works.

Thanks.

[dxps]

@efemkay Thanks again!

It actually works! Marked your answer as the solution.

With either .cm-s-obsidian .HyperMD-header-3 or .cm-s-obsidian .HyperMD-header.HyperMD-header-3. I just had to use padding instead of margin.

To anybody else in this community, here is the snippet for controlling H3 appearance, including the vertical spacing (which is relevant to me to have better readability when I collapse them):

.cm-s-obsidian .HyperMD-header.HyperMD-header-3 { 
/*.cm-s-obsidian .HyperMD-header-3 { */
  font-family: var(--font-family-editor);
  font-weight: 500;
  font-size: var(--font-size-h3);
  color: var(--text-title-h3);
  padding: 14px 0 10px 0;
}

For future reference, my only question would be how could I find myself (if possible) such Obsidian specific CSS rules and their hierarchy

Thanks!

[efemkay]

references are a bit here and there. so these are what i direct people to

• Common Selectors for Custom CSS - Share & showcase - Obsidian Forum
• Getting comfortable with Obsidian CSS - Share & showcase - Obsidian Forum
  • i highly suggest understand this post if you like to tinker with css. Ctrl/Cmd Shift I is your friend
• Meta Post - Common CSS Hacks - Share & showcase - Obsidian Forum
• How to Style Obsidian - Obsidian Hub - Obsidian Publish

btw, yeah i forgot that somehow in editing view, you would want to avoid setting the margin. set instead the padding. i don’t really know why but that always been advise from obsidian theme developers.

[tingmelvin]

Just for posterity why it’s a bad idea to use margins instead of paddings, from Licat, for editing view:

“The editor measures and predicts where elements are located on the page so that when you scroll around, parts of the page that’s out of view can be removed to keep the editor performant. Using margins completely breaks the ability for the editor to do that because margins don’t behave predictably due to the margin collapse algorithm”

(Discord)

[dxps]

@efemkay Thanks for the refs!
And yes, meanwhile, I found that the so popular shortcut Ctrl/Cmd+Shift+I works in Obsidian as well. Thus, I managed to have a pretty perfect setup to my taste.