Set p-spacing to 0 for Hx headers in live preview

[obsidian885]

Hi,

I’ve been using live preview for my editing, and I notice that the padding between text and a header that follows confuses me as to wether I have a newline or not. So in the live preview, I see this:

Some text,
text

## my header

But the actual markdown is this:

Some text,
text
## my header

I tried creating a .obsidian/snippets/style.css with CSS, but have failed to address this. None of the styles I’ve tried have produced any obvious change:

body {
  --text-normal: red;
  --p-spacing: 0;
}

.cm-line {
  padding-top: 0 !important;
  background-color: red;
}
.cm-s-obsidian .cm-line.HyperMD-header {
    padding-top: 0 !important;
}
body {
  --p-spacing: 0;
}

h2, .markdown-rendered h2 {
  padding-top: 0 !important;
}

.HyperMD-header {
  padding-top: 0 !important;
}

Does anyone know the correct way, if it exists, to adjust the padding above headers so that in live preview mode, if there is no newline before the header, the header is flush up against the text preceding it?

Thank you.

[ariehen]

This alone should do it for all heading levels in Live Preview.

.cm-s-obsidian .cm-line.HyperMD-header {
    padding-top: 0; /* default is: var(--p-spacing) */
}

[obsidian885]

That was my hope, but I’m not seeing that behavior. Is Settings > Appearance > CSS snippets > Refresh not enough to activate it? This is

Version 1.4.13 (Installer 1.4.13)

I put this

.cm-s-obsidian .cm-line.HyperMD-header {
    padding-top: 0;
}

inside: .obsidian/snippets/style.css

That seems to be all that’s required?

[ariehen]

@obsidian885

Is Settings > Appearance > CSS snippets > Refresh not enough to activate it?

Yes, Settings > Appearance > CSS snippets → style.css (if that’s the file name) → ON should be sufficient. Using your entire snippet above, I see this in Live Preview:

Here’s a short version that’s working for me:

styles.css (124 Bytes)

A few things:

• Your Obsidian version is a bit older, but that shouldn’t be an issue here.
• Your file may not be an actual .css file; it might be styles.css.txt or something similar. What did you used to create it?
• A community theme or other snippet may be causing a conflict (though I don’t think that’s the case here).
• Sometimes using !important is necessary, but most of the time it’s not. Overuse can cause issues and complicate tracking down where a style change is coming from.

[obsidian885]

I’ve upgraded to the latest version, but I don’t see any difference. I wasn’t expecting to, but it was worth a shot. The file path is: ls .obsidian/snippets/ style.css

Looks like user error, it picks up the filename, and I completely missed the toggle. It’s been that kind of week with missing obvious things.

Thanks for your help with this!