Make empty line breaks and spacing between body text and headings same in editing mode as in reading mode

Help
, ,
1

What I’m trying to do

In editing mode, the line spacing is different than in reading mode, specifically empty lines between paragraphs. In reading mode it’s 56 pixels, while in editing mode it’s 72. Not a huge difference, but as a designer I notice it and prefer how it looks in reading mode. I also like how space between heading and body text look and behave in reading mode.

I never ever use reading mode so getting the same look to editing mode would be very nice.

Does anyone know how to do this with CSS?

Things I have tried

Searching the forum. I found CSS snippets that helped me with getting the headings to behave/look similar to reading mode, but I didn’t find ways to make the empty line breaks smaller.

2

You might want to hop here and leave a comment.

1 Like
3

This is something that was driving me wild too. Try this as a snippet:

.cm-line:has(br:only-child) {
  line-height: 1;
}

If you want, you can change the variable for line-height to be something else, but by default this sets it to the same amount as the reading mode.

Cheers.

1 Like
4

Thank you!!!