Horizontal rule spacing inconsistent between live preview and reading modes

Steps to reproduce

  1. Open the sandbox vault.
  2. Add the below file content to a new file.
  3. Toggle between Live Preview and Reading modes.

File content:




Did you follow the troubleshooting guide? Y

Expected result

The spacing around the <hr> should be consistent between modes.

Actual result

In Reading mode, space above and below the <hr> is smaller than it is in Live Preview mode. (Over many <hr>s the document’s height noticeably shrinks.)

Here’s a screenshot of Live Preview (left) vs. Reading (right). The two lines are equal length and both aligned to the top of their respective <hr>s (which themselves move because of spacing changes).


Obsidian version: v1.5.0
Installer version: v1.4.16
Operating system: Darwin Kernel Version 22.6.0: Wed Oct 4 21:25:26 PDT 2023; root:xnu-8796.141.3.701.17~4/RELEASE_X86_64 22.6.0
Login status: logged in
Catalyst license: insider
Insider build toggle: on
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 0
Restricted mode: on


Additional information

I fixed this with a small amount of CSS. Maybe it’s useful to include here? I don’t know if it works generally enough to be a Good Fix, but it maybe helps explain the problem. (> br:only-child borrowed from app.css :sweat_smile:)

/* Instead of the default `.cm-line` height, give <hr> lines the height that the
hr will have, which is the <hr> border thickness. This also has the effect of
limiting the spacing added by the `.cm-line.hr > br`. */
.cm-line.hr {
  height: var(--hr-thickness);

/* .cm-line elements before/after <hr> should match the top/bottom margin
(respectively) of the rendered <hr>, which is hardcoded to 2rem */
.cm-line:has(> br:only-child):has(+ .cm-line.hr),
.cm-line.hr + .cm-line:has(> br:only-child) {
  line-height: 2rem;