Unclickable lines after changing margins in live-editing view

Help
2

A while ago, when Live Preview first came out, Licat mentioned:

Margins breaks the editor, you need to use padding instead

The editor measures and predicts where elements are located on the page so that when you scroll around, parts of the page that’s out of view can be removed to keep the editor performant. Using margins completely breaks the ability for the editor to do that because margins don’t behave predictably due to the margin collapse algorithm

So if you wanted to go the route you were trying, you could change it to:

.mod-cm6 .cm-editor .cm-line {
    padding-bottom: 16px;
}

That should at least stop the editor from breaking, but I see more of a difference between Editing and Reading views using this than with no custom CSS and it affects lists, code blocks, etc.

You could try playing around with a variation of the CSS in this topic https://forum.obsidian.md/t/cant-get-custom-css-to-work/58404/15 using both padding-top and padding-bottom (or only one) until you get the results you’d like.

.markdown-source-view .cm-line:not(.HyperMD-list-line, .HyperMD-codeblock, .HyperMD-callout) {
    padding-top: 0.20em;
    padding-bottom: 0.20em;
}
2 Likes