CSS to reduce upper list margin to paragraphs without changing it in callouts

What I’m trying to do

My goal is to write more compact notes involving bullet-point lists. For this, I have successfully scoured this forum and other places for CSS snippets that reduce the top margins as well as some padding from (un)ordered lists. So far, these are my desired results:
Before:
grafik
After:
grafik

However, my problem is that my current snippet also changes the margins in callouts:
Before:


After:

Is there a way that I can exclude callouts in the snippet?

My current CSS:

/* set the upper margin for the un-ordered list */
.markdown-rendered ul { margin-block-start: -0.9em; }

/* reset the upper margin for un-ordered nested lists */
.markdown-rendered ul ul { margin-block-start: inherit; }

/* set the upper margin for the ordered list */
.markdown-rendered ol { margin-block-start: -0.9em; }

/* reset the upper margin for ordered nested lists */
.markdown-rendered ol ol { margin-block-start: inherit; }

li {
padding-top: 0px;
padding-bottom: 0px;
line-height: 1.25em;
}
ul, ol {
margin-top: 0px;
margin-bottom: 0px;
}

Things I have tried

Trying all sorts of CSS snippets from different topics in this forum as well as attempting to modify them.
Most of the time they result in no change despite having all required plugins (Contextual Typography).

Many thanks in advance!

I think you could use either of these sets to reset lists in callouts (or adjust as desired):

.callout ul { margin-block-start: unset; }
.callout ol { margin-block-start: unset; }

and/or:

.callout li {
    padding-top: unset;
    padding-bottom: unset;
    line-height: unset;
}

.callout :is(ul, ol) {
    margin-top: unset;
    margin-bottom: unset;
}

Give both a try.

1 Like

Thank you! That did it!

For anyone else, my snippet now looks like this:

/* set the upper margin for the un-ordered list */
.markdown-rendered ul { margin-block-start: -0.9em; }

/* reset the upper margin for un-ordered nested lists */
.markdown-rendered ul ul { margin-block-start: inherit; }

/* set the upper margin for the ordered list */
.markdown-rendered ol { margin-block-start: -0.9em; }

/* reset the upper margin for ordered nested lists */
.markdown-rendered ol ol { margin-block-start: inherit; } 

/*adjust spacing*/
li {
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 1.25em;
}
ul, ol {
    margin-top: 0px;
    margin-bottom: 0px;
}

/*fix callouts*/
.callout li {
    padding-top: unset;
    padding-bottom: unset;
    //line-height: unset;
}

.callout :is(ul, ol) {
    margin-top: unset;
    margin-bottom: unset;
}

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