How can I set line spacing with CSS, like we can set it in MS Word?
9 Answers
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 */
-
17I found I also needed
display: block;
for these settings to be effective everywhere, not just top and bottom of paragraph.– PatrickTJan 13, 2015 at 9:43 -
2Remember 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. May 11, 2016 at 6:48
-
2it doesn't work with span because as mentioned by @PatrickT span is not display:block– walvMar 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.– MJCMar 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
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.
-
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 GNov 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 GNov 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
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.
-
9
-
5In some cases,
margin-top
and/ormargin-bottom
can effectively accomplish what is desired here. Dec 1, 2016 at 6:17
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 */
}
Try this property
line-height:200%;
or
line-height:17px;
use the increase & decrease the volume
-
@AVD : It don't work in Presto based Opera. I need a workaround... please! :\ Nov 24, 2013 at 20:22
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>
lineSpacing is used in React Native (or native mobile apps).
For web you can use letterSpacing
(or letter-spacing
)