Inconsistent page header spacing on default theme

Once you’ve done the above, delete everything above this line.

Steps to reproduce

  • Create a new file
  • add header followed by text
  • add another heading followed by text
  • compare read mode with edit preview mode

Did you follow the troubleshooting guide? Y

Expected result

The same spacing to be shown in reading mode as in live preview - this also affects printing.

Actual result

The reading view shows extra padding that is not reflected in the live preview.


Obsidian version: v1.4.5
Installer version: v1.3.7
Operating system: Darwin Kernel Version 22.6.0: Wed Jul 5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64 22.6.0
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 0
Restricted mode: on


Additional information

I have developed this CSS snippet to fix the issue, but *:not(.HyperMD-quote) may leave 1 or two cavities, and ideally don’t want to use important

  /* Fix on header margin so editor and preview reflect the same padding */    
  body {    
    --heading-spacing: var(--p-spacing);    
  .markdown-source-view.mod-cm6 .cm-content > .HyperMD-header + *:not(.HyperMD-header) {    
    /* dont use margin-top, it breaks cm-line, skipping empty lines when trying to navigate */    
    padding-top: var(--p-spacing) !important;    
  .markdown-source-view.mod-cm6 .cm-content > .HyperMD-header + {    
    padding-top: var(--p-spacing) !important;    

Just to note - I have not noticed any issues with this snippet to date.

Thanks, I don’t understand why this hasn’t been fixed - consistency between views seems like a UX no brainer.

Do you use any snippets to resolve the list/check spacing differences?

Hi @govsat1 does this solve your problem?

ul > li.task-list-item .task-list-item-checkbox {
 margin-inline-start: unset !important;

Great, thanks!