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:
After:
However, my problem is that my current snippet also changes the margins in callouts: Before:
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).
/* 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;
}