CSS snippet - How do I remove padding from h1 headers?

[NoNameBohr]

What I’m trying to do

I’m trying to remove padding for headers in read mode. Like in here:

Things I have tried

First I messed with the margin but that leads to misformatted text.

I tried looking up css variables for headers/headings. Before I had tried the same for editing mode and i failed miserably and I took this snippets from here:

.cm-s-obsidian .HyperMD-header.HyperMD-header-1 { 
  padding: 0px 0 0px 0;
}

I took it

I tried to do it for read mode with:

  padding: 0px 0 0px 0;
}

This one can actually succeed in increasing the padding in read mode, but not in making it zero.

[ariehen]

From Obsidian v1.3.7 on, there are two new custom properties that may or many not work for you. Adjusting --heading-spacing will affect all heading levels (h1~h6).

note: changes to --heading-spacing will only be visible in reading view or rendered contexts.

• --p-spacing defines the spacing between paragraphs (defaults to 1rem).
• --heading-spacing defines the spacing above a heading when it follows a paragraph (defaults to 2.5x paragraph spacing).

body {
    --p-spacing: 1rem; 
    --heading-spacing: calc(var(--p-spacing) * 2.5);
}

The above are the defaults, so you could try something like:

body {
    --p-spacing: 1rem; 
    --heading-spacing: calc(var(--p-spacing) * 1.4);
}

---

Reading view with the default --heading-spacing: calc(var(--p-spacing) * 2.5:

Reading view with --heading-spacing: calc(var(--p-spacing) * 1.4:

---

If you only wanted to change the h1 headings for Reading view, you could try this:

.markdown-rendered div:has( > :is(p,pre,table,ul,ol)) + div > :is(h1) {
    margin-top: 15px;
}

[blue_emperor]

@ariehen Hi. It seems that --p-spacing and --heading-spacing are applied differently in live preview and reading mode which is fine I guess. In live preview new paragraphs are not shifted after headings:

## heading
paragraph

Writing new heading in new line above in live preview introduces one line spacing automatically:

## heading
paragraph

# heading

I think this automatic heading spacing in live preview is not so bad since source mode could be used to prevent it from happening. However I find it interesting that automatic spacing is not applied to paragraphs after headings in live preview. Do you know any reason for this? Source mode could be used to get zen‑like writing mode and live preview could be more aggressive and automatically space paragraphs written after headings. I’m also wondering if automatic line spacing in live preview and reading mode is exclusive to headings and paragraphs, i.e. what other blocks get automatic line spacing in live preview or reading mode where I assume source mode doesn’t involve any automatic line spacing between blocks.

[ariehen]

I’m away from my desktop at the moment, but I don’t think --heading-spacing does anything in source mode or live preview.

I’ll have a look later.

The OP was asking about reading view, so that’s what I focused on.

[blue_emperor]

@ariehen Thanks. I think both --p-spacing and --heading-spacing have inaccurate names since --p-spacing in live preview affects spacing between heading and previous line but in reading view --p-spacing affects spacing before and after headings. heading-spacing has meaning in reading mode so that it adds extra spacing if heading-spacing > p-spacing and otherwise it equals to p‑spacing. That interplay of --p-spacing and --heading-spacing is quite complex. In addition p-spacing affects first document heading which is unnecessary and not useful. They could add other attribute to control first heading.

[ariehen]

@Blue_Emperor I can’t speak to the thinking or decisions made in the default theme around --p-spacing or --heading-spacing. I agree it is complex, especially when there are different elements (blockquotes, callouts, tables, etc.) and embeds in the same note — and then add in editing and rendered contexts. I just try to work with what’s there . Let’s try to stay on-topic.

I added a note to my original post in case anyone comes across this in the future and is wondering why changing --heading-spacing doesn’t do anything in source or live preview modes.

[NoNameBohr]

Thank you so much for the answer! Do you have any advice on how I could have identified that the properties I was looking for were “–p-spacing” and “–heading-spacing” on my own?

@ariehen

--p-spacing defines the spacing between paragraphs (defaults to 1rem).

I tried your snippet --heading-spacing: calc(var(--p-spacing) * 0);, using 0 instead of 1.4 . And it not fully remove the spacing above the heading. That being said --heading-spacing: calc(var(--p-spacing) * -1.0); somewhat did, but it’s awkward.

However removing that line entirely and decreasing --p-spacing seems to work. And it seems to only affect read mode as well. I hope I won’t regret it but I’m using:

body {
  --p-spacing: 0.5rem; 
}

Your later snippet is quite useful too. Thank you.

[ariehen]

As you can tell from this topic (and many others), spacing is hot topic and a very personal preference. Hopefully the changes you made work out.

As for the theme custom variables/properties, they are all in the app.css file. Open the developer tools, go to the Sources tab, click on the app.css and copy/paste the entire thing (or parts if it) into a code editor of your choice for easy reference. The properties/variables are also here → CSS variables - Developer Documentation, but I find having the full file on hand easier for quick reference.

Here’s a great guide if you haven’t seen it yet:

Obsidian CSS Quick Guide

Obsidian CSS Quick Guide Hi friends! CSS in Obsidian can be confusing to get into, so this is a guide to get you started with information on the tools, methods, and some background knowledge! Let’s get started by looking at how you can look behind the curtain of Obsidian’s visuals. The Developer Console Obsidian is technically like a website. As such, you can view the source like any other browser. While you are inside the Obsidian window, you can press ctrl+shift+i to bring up the develope…

[NoNameBohr]

I fooled around with developer tools but failed. This really helps though.

Just a note for myself, I should be looking at this:

h1,
.markdown-rendered h1 {
  font-variant: var(--h1-variant);
  letter-spacing: -0.015em;
  line-height: var(--h1-line-height);
  font-size: var(--h1-size);
  color: var(--h1-color);
  font-weight: var(--h1-weight);
  font-style: var(--h1-style);
  font-family: var(--h1-font);
  margin-block-start: var(--p-spacing);
  margin-block-end: var(--p-spacing);
}

That guide looks neat and short. Thank you. Have a great day. : )