Reduce the margin between Headers & Paragraphs, Headers & Lists, Paragraphs & Lists, but keep the margin between paragraphs [Reading]

Custom CSS & Theme Design
,
1

Things I have tried

I have tried using CSS Combinators, but because everything is wrapped in a div (and I can’t get div > p + div > p to do anything) that doesn’t work. I have also tried all variations of p.first, p.firstpara, p::first, etc.

What I’m trying to do

When in reading mode, I would like to reduce/remove the margin underneath headers. Additionally, I want to reduce/remove the margin between paragraphs and lists. Where the issue lies is that either I have no spaces between paragraphs (removing the bottom and top margins means there is nothing spacing subsequent paragraphs out), or lists and headers overlap (if I use a negative margin on the bottom of the header and a negative margin on the top of the list)

I am not experienced enough in CSS to be able to specifically select the elements I want, and I think that is the root of this issue.

2

it would be easier if u just change the bottom margin of the headers. in that way, it will affect only those of header and first para or first list. replace or add relevant h1-h6 to ur preference and adjust how much e.g. here using 0.5em

.markdown-preview-view h1,
.markdown-preview-view h2 {
    margin-bottom: 0.5em;
}

if u really need very specific control, here is what i use to adjust margin between h4 and the first para. but this require mgmeyers’ Contextual Typography plugin which adds a number of css classes to identify the top level divs. so .el-h4 below is coming from the plugin’s addition

div.el-h4 + div.el-p > p {
    margin-block-start: 0.6em;
}

anything else is up to ur creativity

3

Contextual Typography sounds like exactly what I’m looking for. I need a way to differentiate the different CSS elements, so adding classes to the parent div is perfect.

I will experiment with that once I get home.

Not exactly, because the top of the paragraph has margins of it’s own, which means if I want them closer I need a negative margin on the header (which I currently have).

4

Here is the final CSS I ended up going with, thought I’d post it here if anybody else wants it

/* 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;
}
3 Likes
5

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