CSS Snippet for Paragraph spacing on the Canvas

[whirly123]

What I’m trying to do

I am trying to increase the paragraph spacing within the Canvas to match how it looking within document preview.

I am currently using a custom CSS snippet which works great everywhere else:

div.HyperMD-list-line, div.cm-line {
padding-bottom: 1rem !important;
}

However, this doesn’t appear to affect the Canvas until I double click the card so I can edit it.

Things I have tried

Looking through as many CSS examples for the Canvas as I can to see if I can change the paragraph spacing there to match. Nothing works so far.

[ariehen]

When you are not editing Canvas cards (i.e. not clicked into the card and editing), they are rendered; basically the same as Reading view in a note. If you switch to Reading view in a non-Canvas note, you’ll see the div.HyperMD-list-line, div.cm-line CSS isn’t doing anything. Reading view / rendered contexts use different CSS than the editor (Source mode and Live Preview).

In any event, this should be a start. There may be other elements that need adjusting.

.canvas-node .canvas-node-content {
    & br {
        content: '';
        display: block;
        margin-bottom: 10px;
    }
    & ul > li {
        margin-bottom: 10px;
    }
}

An example of non-nested CSS (does the same thing) in case you need to add more:

.canvas-node .canvas-node-content br {
    content: '';
    display: block;
    margin-bottom: 10px;
}

.canvas-node .canvas-node-content ul > li {
    margin-bottom: 10px;
}

Without snippet (rendered, not editing):

With snippet (rendered, not editing):

[whirly123]

Thanks so much - its working great now