How to adjust the line height with CSS?

For the height of a and the height of b marked in the picture above, is it possible to set different values for them respectively with some customized CSS code, and how?

1 Like

the following post is inspiring.

I found a solution and the code is posed below.

.CodeMirror pre.CodeMirror-line {
  line-height: 1.4;/*height of a*/
  padding-top: 6px; /*the lower part of height of b*/
  padding-bottom: 6px;/*the upper part of height of b*/
}

And the code for adjusting the height of the list item in Preview mode is:

li{
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.4;
}
5 Likes

The same question occurred to me, since I am learning CSS. Thanks for the snippets.

Thank you very much for the code! I needed exactly what OP asked for. Is it possible to achieve the same (different height of a and b) in the markdown preview?

With this snippet for edit mode:

.CodeMirror pre.CodeMirror-line {
  line-height: 1.4;/*height of a*/
  padding-top: 6px; /*the lower part of height of b*/
  padding-bottom: 6px;/*the upper part of height of b*/
}

you may also want this snippet to adjust the output in the preview mode:

p{
    line-height: 1.4; /* change this value accordingly */
    display: block;
    padding-top: 6px;  /* change this value accordingly */
    padding-bottom: 6px; /* change this value accordingly */
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
5 Likes

This worked great for me. But one thing I noticed is when I have a blockquote followed by a newline/new paragraph, it looks like it’s still catching the next paragraph within the blockquote, based on the formatting.

All I’ve added is a single snippet with the two listed style definitions above for pre.CodeMirror-line and p

Any ideas what I could add to avoid this?

Thanks for this! The first snippet worked for me in edit mode, but the second one is not working for preview mode. I’m new to this, so I’m sure I’m doing something wrong. But, I tried a series of different attempts (combining both into one snippet, only doing the second one, etc) but no matter how I try, the second one doesn’t change anything.

May be hit enter twice to separate blockquote and paragraph ?

May be replace the 2nd one with this?

br {
display: block;
content: “”;
margin: 2em;
}