Space between Headings and Text in reading mode is absurd

Custom CSS & Theme Design
1

I’ve been trying for two days to reduce the spacing between the headings and the text below them. I’ve tried several snippets and tips from this forum, but nothing works. I’ve searched for plugins, searched through all the style settings.

I don’t understand why Obsidian still has this absurdly large gap between headings and text in reading mode after all these years. Not only is it misleading to use different layouts in reading mode and editing mode, it also looks ugly and is distracting when reading.

Why do we users have to ask every year for such a simple feature that allows us to determine the spacing ourselves in the settings? Why do I, as a user, always have to spend hours searching the internet for codes when I’m not a programmer? I’m happy to pay you for such features, but please change what you’ve been asked for for years. Thank you!

1 Like
2

It is not really a choice made by Obsidian, but the default for Markdown rendering. Regardless, if you want to reduce the space here is a css solution which worked for me with the default Obsidian theme. The !important are not necessary, but put them in just in case you have a theme which changes these values. I’ve put the values to 0 to completely remove the extra space, change them to fit what you need.

h1, h2, h3, h4, h5, h6 {
    /* Changes the spacing after the heading*/
    margin-block-end: 0em !important;
}

.el-h1 + .el-p > p,
.el-h2 + .el-p > p,
.el-h3 + .el-p > p,
.el-h4 + .el-p > p,
.el-h5 + .el-p > p,
.el-h6 + .el-p > p {
    /* Changes the spacing before the text if it comes after a heading*/
    margin-block-start: 0em !important;
}
3 Likes
3

Markdown doesn’t specify default styling, just which HTML element things become.

1 Like
4

I believe I speak for many other users when I say that, as a user who is not a programmer, I do not want to be confronted with such questions and background information at all. It is 2026, and I expect a program to be able to do what it was designed to do. This includes consistent visualization of the elements, regardless of the mode in which I display the note. I don’t care what the programming reasons are. In order to use Obsidian, I’ve had to spend countless hours over the last 12 months creating workarounds for bugs, asking hundreds of questions about usability, learning to program myself, writing CSS code, dealing with bugs and more bugs, and all of that costs a lot of time and nerves that I would rather spend simply using this program for what it’s intended for. I think the basic idea is great.

5

Thank you, but that doesn´t work. Like ten other css snippets from the internet and all the css snippets from Gemini and ChatGPT.
I have the newest Obsidian and Minimal Theme (default). Maybe it´s a theme problem. I give up

6

It’s probably the theme you’re using. I use the default and CSS to control everything.

Some elements may require you to add the !important identifier in your CSS to override the theme, like this:

p {
   padding-top: 2px !important;
}
7

That is weird. As I have the same theme setup (newest Obsidian patch + Minimal theme). It worked for me when I tested it. I have no idea why it didn’t work for you. The only thing I can think of is that some other snippet or a plugin might be interfering?

1 Like
8

Ensure that your CSS is turned on. Settings>Appearance>CSS (all the way at the bottom.) Click reload circular arrows above the slider after its turned on.

Try selecting a different Theme (Setting>Appearance>Theme). Select Default to rule out the Minimal theme is overriding your css.

Regarding 2026 and your not a programmer… Obsidian is not an Apple product. There is more than one button. It’s not for everyone. But this forum is one of the best forums with some of the most helpful people. It doesn’t get any better than this.

Deep breaths…

1 Like
9

I have my solution for you!

/* Reduce spacing between all headings in Reading Mode /
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
margin-top: 12px !important; / Space above the heading /
margin-bottom: 2px !important; / Space below the heading before text */
}

/* Additionally remove top margin from the very first element in the note */
.markdown-rendered :first-child {
margin-top: 0 !important;
}

/* Remove top margin from paragraphs that immediately follow headings */
.markdown-rendered h1 + p,
.markdown-rendered h2 + p,
.markdown-rendered h3 + p,
.markdown-rendered h4 + p,
.markdown-rendered h5 + p,
.markdown-rendered h6 + p {
margin-top: 0 !important;
}

/* Adjust heading padding in Live Preview (CM6 editor) /
.mod-cm6 .cm-editor .HyperMD-header-1 {
padding-top: 5px;
/ padding-bottom: 5px; */
}
.mod-cm6 .cm-editor .HyperMD-header-2 {
padding-top: 5px;
}
.mod-cm6 .cm-editor .HyperMD-header-3 {
padding-top: 5px;
}
.mod-cm6 .cm-editor .HyperMD-header-4 {
padding-top: 5px;
}
.mod-cm6 .cm-editor .HyperMD-header-5 {
padding-top: 5px;
}
.mod-cm6 .cm-editor .HyperMD-header-6 {
padding-top: 5px;
}

/* 1. Global spacing collapse via variables (Reading Mode) */
.markdown-rendered {
–p-spacing: 0px !important;
–list-spacing: 0px !important;
}

/* 2. Remove paragraph margins completely (Reading Mode) */
.markdown-rendered p {
margin-bottom: 0 !important;
margin-top: 0 !important;
}

/* 3. Compact spacing in Live Preview and Source Mode */
.markdown-source-view.mod-cm6 .cm-content > div {
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}

/* 4. Remove remaining margins from lists */
.markdown-rendered ul,
.markdown-rendered ol {
margin-top: 0px !important;
margin-bottom: 0px !important;
}

/* 5. Remove internal spacing between list items
(can only be further reduced using negative values) */
.markdown-rendered li {
margin-top: 0px !important;
margin-bottom: 0px !important;
}

/* 1. Reduce margins for Callouts and Blockquotes in Reading Mode /
.markdown-rendered .callout,
.markdown-rendered blockquote {
margin-top: 4px !important; / Small top gap /
margin-bottom: 0px !important; / Remove bottom gap */
}

/* 2. Remove top margin from the paragraph immediately following them */
.markdown-rendered .callout + p,
.markdown-rendered blockquote + p {
margin-top: 0px !important;
}

/* 3. Live Preview (editing mode) adjustments */
.markdown-source-view.mod-cm6 .cm-content > .cm-callout,
.markdown-source-view.mod-cm6 .cm-content > .cm-quote {
padding-bottom: 0px !important;
}

/* If a line follows a Callout/Quote in the editor */
.markdown-source-view.mod-cm6 .cm-content > .cm-callout + .cm-line,
.markdown-source-view.mod-cm6 .cm-content > .cm-quote + .cm-line {
padding-top: 0px !important;
}

4 Likes
10

Thanks for your tip. It works better than other solutions. Not perfect, but it works. Thank you!

11

Thanks for your support. I really appreciate it. I haven’t been here in a long time because I was so fed up with Obsidian. I just have to accept that, to use Obsidian on a daily basis, I have to constantly search for workarounds for every little feature.