Minimal Theme with Custom CSS for List Spacing

What I’m trying to do

I am trying to remove the spacing between headings and the text/lists that follow them using a CSS snippet that applies in both editing and reading views. I am using the Minimal theme plug-in (Ayu).

Things I have tried

I have a CSS snippet that I think should accomplish this:

.markdown-rendered div:is(.el-p, .el-pre, .el-div, .el-hr, .el-table, .el-ul, .el-ol) + div:is(h1,h2,h3,h4,h5,h6) {
    margin-bottom: 0px;
}

.markdown-rendered p {
    margin-block-start: 0px;
}

In Editing View (both using Live Preview and Source views), the spacing between a heading and the following content is removed as desired:


However, in Reading View, the space returns:

Is there something wrong with my CSS for it to only apply in Editing view?

Give this a try in Reading:

:is(h1, h2, h3, h4, h5, h6) {
	margin-block-end: 0;
}

:is(.el-h1, .el-h2, .el-h3, .el-h4, .el-h5, .el-h6) + * > :is(p, pre, div, hr, table, ul, ol) {
	margin-block-start: 0;
}

It’s working for me on all of the elements you listed.

1 Like

That worked great, thanks so much!

1 Like

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