How to adjust the line height with CSS?

[GLight]

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]

the following post is inspiring.

Getting comfortable with Obsidian CSS

You make some good points here @goodsignal, so I’d just like to clarify some of it for you. Firstly, I don’t think anything in css can break the app or your notes. Css is just presentation and can’t really affect any data. So feel free to experiment! Go nuts! If you’ve been playing around with the css in the dev tools and gotten lost and things look broken or wrong, a quick reload (ctrl+r I think) or closing and opening Obsidian should fix it. If you mess up your obsidian.css you can always d…

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]

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

[andrademfg]

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]

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

[colemanm]

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?

[dominic]

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.

[pumin]

@colemanm

ould add to avoid this?

May be hit enter twice to separate blockquote and paragraph ?

[pumin]

May be replace the 2nd one with this?

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