Reduce space above/below horizontal lines

Basement
1

Is there a way to reduce the space between the red line and Metadata, and between 2020-09-04 and the red line?
In Edit mode the red lines are the 3 dashes, like so:

---
Metadata
2020-09-04

---

gap

2

I think first you need to activate the custom css plugin (Settings > Appearance) and then you can adjust the whitespace via the selectors margin-top and margin-bottom for the class .markdown-preview-view hr.

Here is a good tutorial about Getting Comfortable with Obsidian CSS.

3

Is this at the top of the note? It should be recognized as front-matter, and then there are special HTML classes you can target with CSS.

4

@sam.baron: no, it is not the top of the note. I am aware of the YAML issue, and, following WhiteNoise’s caution I will not not add anything as Yaml.

5

Ah, yes, so I’ve dealt with this also. You want Obsidian to recognize tags and links in your front-matter, right?

The easiest answer would be custom CSS that targets all horizontal lines:

hr {
  margin: 10px 0;
}

Unfortunately there is not a fool-proof way to target those horizontal lines specifically. I can explain more if needed.

6

@laughingmaus: yes, that works. Many thanks.

1 Like
7

@sam.baron: thanks for your help, Sam, I had not seen your last reply. Anyway, this is what I put in my CSS following @laughingmaus’s suggestion :

.markdown-preview-view hr {
  margin-top: 50px;
  margin-bottom: 50px;
}

The 50px value is just to test. Changing those numbers changes the gap.

1 Like