设置行距

问题描述 投票:130回答:9

如何设置CSS的行距,就像我们可以在MS Word中设置行距一样?

css line
9个回答
217
投票

尝试line-height属性。

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

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

em个单位

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

97
投票

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


9
投票

如果要使用压缩线,则可以为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>

->玩this snippet on jsfiddle.net

您也可以增加line-height以进行精细的行距控制:

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

9
投票

您无法在CSS中使用<p>块之间的行高设置行间距。而是设置段落内的行间距,即<p>块内行之间的间距。也就是说,行高是印刷者在段落中的行间领先,由行高控制。


8
投票

尝试此属性


3
投票

我不确定这是否是您的意思:


3
投票

尝试line-height属性;有很多分配线高的方法


0
投票

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


0
投票

是的,正如大家所说,line-height就是这个东西。您正在使用的任何字体,中间高度的字符(例如a或■,不通过上下字符)都应在line-height: 0.60.65处使用相同的高度长度。

© www.soinside.com 2019 - 2024. All rights reserved.