Unclickable lines after changing margins in live-editing view

[meadhra_n]

What I’m trying to do

I wrote a snippet that should add margins to the preview mode that are similar to reading mode, and it worked fine, until I noticed that some lines are not clickable anymore? When I click on that line in live preview to add/change some text, the cursor doesn’t go to that line and I can only edit that specific line using the arrow keys to navigate. Only the left and right arrow keys work, up and down just skips these lines. It seems to be happening to random lines, not all, in all of my notes.

Sorry if it doesn’t make sense, English isn’t my first language and I don’t know much about programming.

Here’s the code I am using:

.mod-cm6 .cm-editor .cm-line {
margin-bottom: 16px !important;
}

[ariehen]

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;
}