My List Item Spacing

Custom CSS & Theme Design
1

This snippet increases the spacing between list items.

I credit Spacing between list items as the base to start with. I used Gemini to fix up an issue: egregious spacing above/below a list item when there was already a blank line. Fixing that also means list items that already have blank lines between don’t get extra spacing.

I’m sure there are still issues and would appreciate it if anyone can point them out!

:root {
    --list-item-spacing: 0.75em;
}

/* --- READING MODE --- */

/* 1. Space between sibling list items */
.markdown-rendered :is(ul, ol) > li + li {
    padding-top: var(--list-item-spacing);
}

/* 2. Space between a parent item's text and its nested sub-list */
.markdown-rendered :is(ul, ol) > li > :is(ul, ol) {
    padding-top: var(--list-item-spacing);
}

/* --- EDIT MODE (Live Preview) --- */

/* 1. Space between any consecutive list lines (top-level or indented) 
   FIX: Exclude .HyperMD-list-line-nobullet so blank lines inside loose lists don't trigger extra padding */
.markdown-source-view.mod-cm6
    .cm-contentContainer
    > .cm-content
    > .cm-line.HyperMD-list-line:not(.HyperMD-list-line-nobullet)
    + .cm-line.HyperMD-list-line:not(.HyperMD-list-line-nobullet) {
    padding-top: var(--list-item-spacing) !important;
}

/* 2. Space above a list if it directly follows text (NOT a blank line) */
.markdown-source-view.mod-cm6
    .cm-contentContainer
    > .cm-content
    > .cm-line:not(.HyperMD-list-line):not(.HyperMD-header):not(
        :has(> br:only-child)
    )
    + .cm-line.HyperMD-list-line:not(.HyperMD-list-line-nobullet) {
    padding-top: var(--list-item-spacing) !important;
}

image
image450×1138 19 KB