Set line spacing

Question

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

Solution 1

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  */

Solution 2

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.

Solution 3

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.

Solution 4

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 */
}

Solution 5

Try this property

line-height:200%;

or

line-height:17px;

use the increase & decrease the volume

View more solutions

Comments

[user2284570]

It don't work in Presto based Opera. I need a workaround... please! :\

[user2284570]

It don't work in Presto based Opera. I need a workaround... please! :\

[user2284570]

@AVD : It don't work in Presto based Opera. I need a workaround... please! :\

[Mike G]

@user status: works on my machine. Did you try any of the other answers?

[user2284570]

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!

[Mike G]

@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.

[user2284570]

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.

[PatrickT]

I found I also needed display: block; for these settings to be effective everywhere, not just top and bottom of paragraph.

[MJC]

Be careful with that. Inline elements should, probably, be "display: inline-block;"

[Flimm]

Couldn't you use margins for that for inter-<p> spacing?

[raulchopi]

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.

[user1147171]

In some cases, margin-top and/or margin-bottom can effectively accomplish what is desired here.

[walv]

it doesn't work with span because as mentioned by @PatrickT span is not display:block

[MJC]

@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.

[user2284570]

@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]

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.