Space between heading

Hello, this is my first post here. I would like to know if there is a way to change the space between headings with custom css (I don’t know anything about it).

I’m using minimal theme.

Does it have a way to set this into preview mode too?
Ty

You could use a CSS snippet to remove the space between header elements and the next paragraph element for preview mode:

:root :is(h1,h2,h3,h4,h5,h6) {
  margin-bottom: 0px;
}
:root div:has(:is(h1,h2,h3,h4,h5,h6))+div>p {
  margin-top: 0px;
}

Note that you may need to update your Obsidian app version if it’s not working, this uses the :has() selector.

You might also add !important to the declarations if they’re being overridden

Screenshots

Tested on the default settings in the Minimal theme.


Live preview vs Preview

(You don’t need to remove the lines between, but it looked better for the screenshot)

1 Like

Thank you, it worked! Do you know if I can change it too when exporting to pdf? The pdf seems to not respect this changes.

I couldn’t find any ways through a quick google search. Export to PDF is quite a black box since I don’t know how to inspect the styles it uses. You’ll have to look more yourself if it’s important.

1 Like

Oh sure, no problem. Ty for the help :slight_smile:

Something like this might work for you. You can comment out the font-family; I just put in in there to make sure that part of the snippet was working. You can put this in the same file as Fire’s snippet, it will only affect PDF export. Tested with the default theme.

@media print {
  p {
  margin-top: 0px;  
  }
  :is(h1,h2,h3,h4,h5,h6) {
  font-family: 'Baoli SC' !important;
  padding-bottom: 0px;
  }
}

PDF export with no snippet:

PDF export with snippet:

Hello, I tried this snippet but it didn’t work here :frowning:

PDF:

Reading mode:
image

idk why

Try adding a few more !importants… because Minimal and PDF export is a mystery. :melting_face:

@media print {
  p {
  margin-top: 0px !important;  
  }
  :is(h1,h2,h3,h4,h5,h6) {
  font-family: 'Baoli SC' !important;
  padding-bottom: 0px !important;
  }
}

Working here with the Minimal theme.

1 Like

YEAH now it’s working

ty!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.