Set line spacing
CssLineCss Problem Overview
How can I set line spacing with CSS, like we can set it in MS Word?
Css Solutions
Solution 1 - Css
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 - Css
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 - Css
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 - Css
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 - Css
Try this property
line-height:200%;
or
line-height:17px;
use the increase & decrease the volume
Solution 6 - Css
I am not sure if this is what you meant:
line-height: size;
Solution 7 - Css
Try line-height
property; there are many ways to assign line height
Solution 8 - Css
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>
Solution 9 - Css
lineSpacing is used in React Native (or native mobile apps).
For web you can use letterSpacing
(or letter-spacing
)