Line spacing in preview view vs. reading view

[manonn]

Hi,

Can someone help me to resolve my problem ?

What I’m trying to do

I want reading view to be the same as live preview (no spacing betwwen (“blablabla” and the first item of my list).

Here is the live preview :

Here is the reading view :

Things I have tried

• I looked in the settings but couldn’t find anything
• Can this be solved with a CSS snippet ?

NB : I use Minimal Theme.

Thanks for your help !

[MiBo_8]

Using a CSS snippet, I solved a similar problem by adding space at the bottom of the headings to make the edit mode similar to the reading mode. Hence, I guess your problem can be solved with a snippet, but you need to write it.

I leave mine here for someone else:

.mod-cm6 .cm-editor .HyperMD-header-1 {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.markdown-source-view.mod-cm6 .HyperMD-header { 
	padding-bottom: 0.5em; 
	}

It would be great if the two views have the same spacing by default.

[mr_abomination]

I solved this a while back with the help of the Contextual Typography plugin.

I’ve updated my answer a bit since then, so hopefully this helps

/* 
    This uses the Contextual Typography pluggin to add additional information to the divs
    https://github.com/mgmeyers/obsidian-contextual-typography
*/

/* Remove the gap between a paragraph and a list that follows it */
div.el-p + div.el-ul > ul,
div.el-p + div.el-ol > ol {
    margin-top: -15px;
}

/* Changes the bullet indent to be ~2 characters instead of ~4 */
ul, ol {
    padding-inline-start: 20px;
}


/* Spreads out concurent headers (of the same size) */
div.el-h1 + div.el-h1 > h1, 
div.el-h2 + div.el-h2 > h2, 
div.el-h3 + div.el-h3 > h3, 
div.el-h4 + div.el-h4 > h4, 
div.el-h5 + div.el-h5 > h5, 
div.el-h6 + div.el-h6 > h6 {
    margin-top:  25px !important;
}

/* Brings the bottom of headers closer to whatever follows them  */
h1, h2, h3, h4, h5, h6 {
    margin-bottom:  -15px !important;
}

/* Tables don't have a top margin by default, so add one when following a (negative margin) header */
div.el-h1 + div.el-table > table,
div.el-h2 + div.el-table > table,
div.el-h3 + div.el-table > table,
div.el-h3 + div.el-table > table,
div.el-h4 + div.el-table > table,
div.el-h6 + div.el-table > table {
    margin-top: 20px;
}

/* Tighten up the seperator line */
hr {
    margin-top: 11px;
    margin-bottom: 11px;
}

div.el-h3 + div.el-hr > hr {
    margin-top: 25px;
}