# How to adjust the line height with CSS? **URL:** \ **Category:** Help\ **Created:** [December 9, 2020, 7:44am UTC](https://forum.obsidian.md/t/how-to-adjust-the-line-height-with-css/9747 "2020-12-09T07:44:45Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![GLight](https://forum.obsidian.md/user_avatar/forum.obsidian.md/glight/32/4851_2.png) [@GLight](https://forum.obsidian.md/u/GLight)\ **Post date:** [December 9, 2020, 7:44am UTC](https://forum.obsidian.md/t/how-to-adjust-the-line-height-with-css/9747/1 "2020-12-09T07:44:46Z")
![截屏2020-12-09 15.34.55](https://forum.obsidian.md/uploads/default/original/2X/a/a7a759dc62ae49759c2973734510f230fdc6dd22.png) 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? ---
**Author:** ![GLight](https://forum.obsidian.md/user_avatar/forum.obsidian.md/glight/32/4851_2.png) [@GLight](https://forum.obsidian.md/u/GLight)\ **Post date:** [December 10, 2020, 5:11am UTC](https://forum.obsidian.md/t/how-to-adjust-the-line-height-with-css/9747/2 "2020-12-10T05:11:07Z")
the following post is inspiring. > [@Getting comfortable with Obsidian CSS](https://forum.obsidian.md/t/getting-comfortable-with-obsidian-css/133/5): > > 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; } ``` ---
**Author:** ![oxysmart](https://forum.obsidian.md/user_avatar/forum.obsidian.md/oxysmart/32/80052_2.png) [@oxysmart](https://forum.obsidian.md/u/oxysmart)\ **Post date:** [December 12, 2020, 1:08am UTC](https://forum.obsidian.md/t/how-to-adjust-the-line-height-with-css/9747/3 "2020-12-12T01:08:45Z")
The same question occurred to me, since I am learning CSS. Thanks for the snippets. ---
**Author:** ![andrademfg](https://forum.obsidian.md/user_avatar/forum.obsidian.md/andrademfg/32/7554_2.png) [@andrademfg](https://forum.obsidian.md/u/andrademfg)\ **Post date:** [January 7, 2021, 11:27pm UTC](https://forum.obsidian.md/t/how-to-adjust-the-line-height-with-css/9747/4 "2021-01-07T23:27:23Z")
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? ---
**Author:** ![GLight](https://forum.obsidian.md/user_avatar/forum.obsidian.md/glight/32/4851_2.png) [@GLight](https://forum.obsidian.md/u/GLight)\ **Post date:** [February 13, 2021, 5:30pm UTC](https://forum.obsidian.md/t/how-to-adjust-the-line-height-with-css/9747/6 "2021-02-13T17:30:30Z")
With this snippet for edit mode: ```nohighlight .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: ```auto 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; } ``` -------------- after upgraded to 1.0.0, I use the following css snippet to adjust the font size and line height ----- ```css body{ --font-smallest: 0.8em; --font-smaller: 0.9em; --font-small: 1em; --font-ui-smaller: 14px; --font-ui-small: 16px; --font-ui-medium: 18px; --font-ui-large: 20px; --line-height-normal:1.4; --line-height-tight:1.2; } ``` ---
**Author:** ![colemanm](https://forum.obsidian.md/user_avatar/forum.obsidian.md/colemanm/32/20791_2.png) [@colemanm](https://forum.obsidian.md/u/colemanm)\ **Post date:** [October 12, 2021, 8:04pm UTC](https://forum.obsidian.md/t/how-to-adjust-the-line-height-with-css/9747/8 "2021-10-12T20:04:49Z")
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. ![CleanShot 2021-10-12 at 16.01.34@2x](https://forum.obsidian.md/uploads/default/original/3X/9/3/93216f58ad7b20044f4a67e5ff486a4a7c2e70d0.png) 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? ---
**Author:** ![dominic](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/d/13edae/32.png) [@dominic](https://forum.obsidian.md/u/dominic)\ **Post date:** [October 12, 2021, 8:17pm UTC](https://forum.obsidian.md/t/how-to-adjust-the-line-height-with-css/9747/9 "2021-10-12T20:17:55Z")
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. ---
**Author:** ![pumin](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/p/58956e/32.png) [@pumin](https://forum.obsidian.md/u/pumin)\ **Post date:** [October 21, 2021, 3:31pm UTC](https://forum.obsidian.md/t/how-to-adjust-the-line-height-with-css/9747/10 "2021-10-21T15:31:21Z")
> [@colemanm](#): > > ould add to avoid this? May be hit enter twice to separate blockquote and paragraph ? ---
**Author:** ![pumin](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/p/58956e/32.png) [@pumin](https://forum.obsidian.md/u/pumin)\ **Post date:** [October 21, 2021, 3:32pm UTC](https://forum.obsidian.md/t/how-to-adjust-the-line-height-with-css/9747/11 "2021-10-21T15:32:16Z")
May be replace the 2nd one with this? > br { > display: block; > content: “”; > margin: 2em; > } ---
**Author:** ![manuelwill](https://forum.obsidian.md/user_avatar/forum.obsidian.md/manuelwill/32/40945_2.png) [@manuelwill](https://forum.obsidian.md/u/manuelwill)\ **Post date:** [January 5, 2023, 10:01am UTC](https://forum.obsidian.md/t/how-to-adjust-the-line-height-with-css/9747/12 "2023-01-05T10:01:13Z")
The _br_ tag can not be styled with CSS (for reasons, google) I was able to get nice paragraph spaces in edit mode with this: ```auto /*Add Paragraph Spacing in edit mode*/ .markdown-source-view.mod-cm6 .cm-line{ padding-bottom:16px; } ``` ![image](https://forum.obsidian.md/uploads/default/original/3X/7/8/78be7ffaf20e8313bf9389cc5b7130b6f0e68bea.png) _Example in edit mode_ However i am unable to add any paragraph spacing in view mode. I have inspected the code and apparently Obsidian puts together multiple paragraphs into one single _p_ element - which makes it impossible to me to add spacing to the individual paragraphs. Has anyone had any success with this? ![image](https://forum.obsidian.md/uploads/default/original/3X/0/8/089a63b045cd0d174514d4f96698da7be089ce3d.png) _Example in view mode_ ---
**Author:** ![mreiter](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/m/b5ac83/32.png) [@mreiter](https://forum.obsidian.md/u/mreiter)\ **Post date:** [January 27, 2023, 7:12am UTC](https://forum.obsidian.md/t/how-to-adjust-the-line-height-with-css/9747/13 "2023-01-27T07:12:58Z")
@manuelwill this is cool, is there also a way to apply this only to “regular” paragraphs, but display lists and numbered lists separately? I’d like to add spacing between paragraphs, but add none to (numbered) lists. ---
**Author:** ![WhiteNoise](https://forum.obsidian.md/user_avatar/forum.obsidian.md/whitenoise/32/11_2.png) [@WhiteNoise](https://forum.obsidian.md/u/WhiteNoise)\ **Post date:** [April 1, 2023, 3:09pm UTC](https://forum.obsidian.md/t/how-to-adjust-the-line-height-with-css/9747/14 "2023-04-01T15:09:39Z")
Closed on April 1, 2023, 3:09pm UTC