I want to add margins to headings (in edit mode) such that there is additional spacing between the top border and the preceding text.
However, I noticed two things
With a custom css rule to add a margin to level 2 headings, as soon as there are more than 3 headings in the document, the last 3 lines are no longer responsive to the curser (i.e., clicking in the text to move the curser) and text selection seems very buggy around them.
I suspect that it is somewhat of a known issue by the developers, as I found that there is a css rule setting all margins to 0 for all descendants of the cm-content class and this rule uses !important (which should really be avoided at all costs for styling rules that are part of the core application and not a snippet)
Things I have tried
I know that the margin property is the issue, as a simple css snippet with only that property leads to the issue.
Source view and regular edit view are equally affected by the issue.
Yes, you shouldn’t change vertical margins in the editor. Changing margins in Reading view is fine.
via Licat (03/11/2022) in the Discord #theme-dev channel:
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
and another post:
Margins breaks the editor, you need to use padding instead