How to adjust the line height with CSS?

GLight · February 23, 2021, 8:05am

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?

GLight · December 10, 2020, 5:12am

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

oxysmart · December 12, 2020, 1:08am

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

andrademfg · January 7, 2021, 11:27pm

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?

GLight · February 13, 2021, 5:32pm

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