Heading Spacing in Preview Mode

Things I have tried

I have tried digging through the CSS files of my theme I downloaded, changing attributes and trying to add some to see if it will work.

What I’m trying to do

I would like the spacing to be less in preview mode. I don’t know much CSS, but I’m guessing there must be some attribute I don’t know the name of that can fix it. Here is the CSS below for the headers.

Also for some reason the 6th header is the only one with markdown-preview in it, and I’m guessing I can use that to adjust the spacing in preview mode only for all of the headers.

h1 {
  color: var(--accent-1);

h2 {
  color: var(--accent-2);

h3 {
  color: var(--accent-3);

h4 {
  color: var(--accent-4);

h5 {
  color: var(--accent-5);

.markdown-preview-view h6 {
  color: var(--accent-6);

It would be great if you share the theme you downloaded, and maybe the css files, to review them and help you with your needs.

I used the “Spectrum” Obsidian Theme by Wiktoria Mielcarek.

Here is the entire CSS folder below

Spectrum.css (30.8 KB)

Checking the skin I’ve found it uses display:flex with column direction for div elements layout:

.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > div {
  display: flex;
  flex-direction: column;
  align-items: center;

A quick fix would be to remove that rule from the theme css. A clean way to to this is by defining a css snippet to override this behavior with this rule:

.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > div {
  display: block !important;

Remember to activate the snippet after creating it!

With this fix in place the spacing in preview mode seems to be quite right:

I don’t know if there’s a better solution (maybe someone with more css skills can provide one). That’s the best I can do for now! Hope this helps!

Sorry, I don’t really see much of a difference when I apply this, the spacing after the header and before the list is too big for me. I found a way to fix the bottom margin after the list!