How to add the margin between headers and paragraphs, lists and paragraphs in edit mode?

Help
#1

Things I have tried

截屏2022-06-02 12.01.42
截屏2022-06-02 12.01.422420×1642 211 KB

I’ve used CSS code sinppet to add to the margin between lines and lists. But it only works in preview mode. Here is the code.

.CodeMirror pre.CodeMirror-line {
    padding-top: 6px; 
    padding-bottom: 6px;
  }

  li{
    padding-top: 6px;
    padding-bottom: 6px;
  }

And I’ve already add “style setting” plugin to adjsut the line height.

What I’m trying to do

I want to make the edit mode and preview mode appear to be same. I perfer wider space between headers and paragraphs, lists and paragraphs, paragrahs and paragraphs.

#2

Do the classes given in this answer by @Angel help? (Found by searching edit mode css.)

#3

Thank you so much! It works! :smiling_face_with_three_hearts:

Here are codes and results:

.HyperMD-header.HyperMD-header-1 {
  line-height: 2.5;   /* It works */
}

.HyperMD-header.HyperMD-header-1 {
  padding-top: 8px;          /* it doesn't work */ 
  padding-bottom: 8px;
}
1 Like