172

How can I set line spacing with CSS, like we can set it in MS Word?

9 Answers 9

271

Try the line-height property.

For example, 12px font-size and 4px distant from the bottom and upper lines:

line-height: 20px; /* 4px +12px + 4px */

Or with em units

line-height: 1.7em; /* 1em = 12px in this case. 20/12 == 1.666666  */
8
  • 17
    I found I also needed display: block; for these settings to be effective everywhere, not just top and bottom of paragraph.
    – PatrickT
    Jan 13, 2015 at 9:43
  • 2
    Remember that you can't set line-height property's value under '1' or '100%' if you are setting it to an <a> element. If you wanted so, you can set an <p> between your text and your <a>, for example.
    – raulchopi
    May 11, 2016 at 6:48
  • 2
    it doesn't work with span because as mentioned by @PatrickT span is not display:block
    – walv
    Mar 21, 2017 at 1:08
  • 1
    @walv, it's not suppose to.Also if you need to use it in a span, it0s preferable to use display: inline-block, instead of display: block.
    – MJC
    Mar 21, 2017 at 11:24
  • 1
    @Userthatisnotauser you can not a similar thing will happen to users who will need to use java applet or web application that requires ᴜᴅᴘ socket (because of the lost of ɴᴘᴀᴘɪ support and all browsers are withdrawing support in their custom plug‑in ᴀᴘɪ). The ᴊᴘʟ web site dedicated to the Cassini mission still requires the quick time plugin in order to watch their videoꜱ online. Not to mention only ɴᴘᴀᴘɪ plugins allows you to watch stereoscopic video through stereoscopic displays in streaming. In my country, two major tv channel provider still requires silverlight with plans to not upgrade. Oct 17, 2017 at 11:14
118

You can also use a unit-less value, which is the number of lines: line-height: 2; is double spaced, line-height: 1.5; is one and a half, etc.

5
  • It don't work in Presto based Opera. I need a workaround... please! :\ Nov 24, 2013 at 20:21
  • @user status: works on my machine. Did you try any of the other answers?
    – Mike G
    Nov 24, 2013 at 20:50
  • I mean the the CSS element is recognized, but doesn't affect the rendering output. Tested 12.16 and 12.50. The other answer are basically the same : THEY ALL TELL to use the the line-height element! Nov 24, 2013 at 20:51
  • @user Because that's how you do it. I would imagine it's a browser bug or lack of support for that css rule. Should probably be asked as a separate question.
    – Mike G
    Nov 25, 2013 at 13:46
  • Sure, asking a workaround is off-topic here... by the way I've seen it affect other browsers brands: it exist when it the setting is set with the DOM or when contenteditable="true" is present. Nov 25, 2013 at 13:47
12

You cannot set inter-paragraph spacing in CSS using line-height, the spacing between <p> blocks. That instead sets the intra-paragraph line spacing, the space between lines within a <p> block. That is, line-height is the typographer's inter-line leading within the paragraph is controlled by line-height.

I presently do not know of any method in CSS to produce (for example) a 0.15em inter-<p> spacing, whether using em or rem variants on any font property. I suspect it can be done with more complex floats or offsets. A pity this is necessary in CSS.

2
  • 9
    Couldn't you use margins for that for inter-<p> spacing?
    – Flimm
    Sep 10, 2015 at 9:15
  • 5
    In some cases, margin-top and/or margin-bottom can effectively accomplish what is desired here. Dec 1, 2016 at 6:17
10

If you want condensed lines, you can set same value for font-size and line-height

In your CSS file

.condensedlines {              
    font-size:   10pt;
    line-height: 10pt;  /* try also a bit smaller line-height */
}

In your HTML file

<p class="condensedlines">
bla bla bla bla bla bla <br>
bla bla bla bla bla bla <br>
bla bla bla bla bla bla <br>
</p>

--> Play with this snippet on jsfiddle.net

You can also increase line-height for fine line spacing control:

.mylinespacing {
    font-size:   10pt;
    line-height: 14pt; /* 14 = 10 + 2 above + 2 below */
}
9

Try this property

line-height:200%;

or

line-height:17px;

use the increase & decrease the volume

1
  • @AVD : It don't work in Presto based Opera. I need a workaround... please! :\ Nov 24, 2013 at 20:22
4

I am not sure if this is what you meant:

line-height: size;
0
4

Try line-height property; there are many ways to assign line height

1

Yup, as everyone's saying, line-height is the thing. Any font you are using, a mid-height character (such as a or ■, not going through the upper or lower) should go with the same height-length at line-height: 0.6 to 0.65.

<div style="line-height: 0.65; font-family: 'Fira Code', monospace, sans-serif">
aaaaa<br>
aaaaa<br>
aaaaa<br>
aaaaa<br>
aaaaa
</div>
<br>
<br>

<div style="line-height: 0.6; font-family: 'Fira Code', monospace, sans-serif">
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■
</div>
<br>
<br>
<strong>BUT</strong>
<br>
<br>
<div style="line-height: 0.65; font-family: 'Fira Code', monospace, sans-serif">
ddd<br>
ƒƒƒ<br>
ggg
</div>

0

lineSpacing is used in React Native (or native mobile apps).

For web you can use letterSpacing (or letter-spacing)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.