174

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

Alexander Abakumov
  • 13,617
  • 16
  • 88
  • 129
Moon
  • 19,518
  • 56
  • 138
  • 200

9 Answers9

277

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  */
MJC
  • 3,871
  • 4
  • 23
  • 34
  • It don't work in Presto based Opera. I need a workaround... please! :\ – user2284570 Nov 24 '13 at 20:21
  • 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 '15 at 09:43
  • Be careful with that. Inline elements should, probably, be "display: inline-block;" – MJC Jan 13 '15 at 12:06
  • 2
    Remember that you can't set line-height property's value under '1' or '100%' if you are setting it to an element. If you wanted so, you can set an

    between your text and your , for example.

     – raulchopi May 11 '16 at 06:48
  • 2
    it doesn't work with span because as mentioned by @PatrickT span is not display:block – walv Mar 21 '17 at 01: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 '17 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. – user2284570 Oct 17 '17 at 11:14
  • 1
    As the web evolve, not only compatibility is lost, but functionality too… And as non presto opera have only the name in common *(it’s really 2 different interfaces and the newer one is really less customizable)*, I decided to not upgrade after that. – user2284570 Oct 17 '17 at 11:17
120

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.

Mike G
  • 4,232
  • 9
  • 40
  • 66
  • It don't work in Presto based Opera. I need a workaround... please! :\ – user2284570 Nov 24 '13 at 20:21
  • @user status: works on my machine. Did you try any of the other answers? – Mike G Nov 24 '13 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! – user2284570 Nov 24 '13 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 '13 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. – user2284570 Nov 25 '13 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.

Dan Nissenbaum
  • 13,558
  • 21
  • 105
  • 181
Thomas Visel
  • 121
  • 1
  • 2
10

Try this property

line-height:200%;

or

line-height:17px;

use the increase & decrease the volume

KV Prajapati
  • 93,659
  • 19
  • 148
  • 186
ANANTH.S
  • 119
  • 1
  • 8
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 */
}
oHo
  • 51,447
  • 27
  • 165
  • 200
4

I am not sure if this is what you meant:

line-height: size;
Alan Haggai Alavi
  • 72,802
  • 19
  • 102
  • 127
4

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

Tony
  • 9,672
  • 3
  • 47
  • 75
Harsha M V
  • 54,075
  • 125
  • 354
  • 529
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>
RubenVerg
  • 145
  • 1
  • 8
0

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

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

Eric Kim
  • 10,617
  • 4
  • 29
  • 31