设置线间距

我如何设置行间距与 CSS,就像我们可以设置它在 MS Word?

458084 次浏览

我不确定你是不是这个意思:

line-height: size;

尝试 线高属性。

例如,12px 的字体大小和4px 的距离底部和上面的行:

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

或者用 em单位

line-height: 1.7em; /* 1em = 12px in this case. 20/12 == 1.666666  */

尝试 line-height属性; 有许多方法来分配行高

试试这个属性

line-height:200%;

或者

line-height:17px;

使用增加或减少体积

您还可以使用无单位值,即行数: line-height: 2;是双倍行距,line-height: 1.5;是一个半,等等。

如果需要压缩行,可以为 font-sizeline-height设置相同的值

在你的 CSS 文件里

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

在 HTML 文件中

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

- > 玩 这是 jsfiddle.net 上的片段

你也可以增加 line-height来控制细线间距:

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

不能使用行高(<p>块之间的间距)在 CSS 中设置段落间距。取而代之的是设置段落内行间距,即 <p>块中行与行之间的间距。也就是说,行高是排版工作者在段落内的行间引导由行高控制。

目前我还不知道 CSS 中有什么方法可以产生(例如)0.15 em 的 <p>间距,无论是在任何字体属性上使用 em 还是 rem 变体。我怀疑它可以用更复杂的浮点数或偏移量来完成。可惜这在 CSS 中是必要的。

LineSpaces 用于 React 本机(或本机移动应用程序)。

对于网页,你可以使用 letterSpacing(或 letter-spacing)

是的,就像大家说的,line-height就是问题所在。 你使用的任何字体,一个中等高度的字符(比如 a 或者 ■ ,不要穿过上面或者下面)应该在 line-height: 0.60.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>