设置行距答案

【问题标题】：Set line spacing设置行距
【发布时间】：2011-04-20 05:08:36
【问题描述】：

如何使用 CSS 设置行距，就像我们可以在 MS Word 中设置一样？

【问题讨论】：

标签： css line

【解决方案1】：

例如，12px font-size 和 4px 距离底线和上线：

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

或em 单位

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

【讨论】：

我发现我还需要display: block; 才能使这些设置在任何地方都有效，而不仅仅是段落的顶部和底部。
请记住，如果将 line-height 属性的值设置为元素，则不能将其设置为 '1' 或 '100%'。例如，如果您愿意，可以在文本和之间设置一个
。
它不适用于跨度，因为正如@PatrickT 所提到的，跨度不是显示：块
@walv，不应该。另外，如果您需要在跨度中使用它，最好使用 display: inline-block，而不是 display: block。
@Userthatisnotauser 对于需要使用需要ᴜᴅᴘ socket 的java小程序或Web应用程序的用户来说，类似的事情不会发生（因为失去了ɴᴘᴀᴘɪ支持并且所有浏览器都在退出支持他们的自定义插件ᴀᴘɪ)。 ᴊᴘʟ 致力于卡西尼号任务的网站仍然需要快速时间插件才能在线观看他们的视频ꜱ。更不用说只有 ɴᴘᴀᴘɪ 插件允许您通过流媒体中的立体显示器观看立体视频。在我的国家，两个主要的电视频道提供商仍然需要 Silverlight，并且计划不升级。

【解决方案2】：

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

【讨论】：

它在基于 Presto 的 Opera 中不起作用。我需要一个解决方法...拜托！ :\
@user status：在我的机器上工作。您是否尝试过其他任何答案？
我的意思是CSS元素被识别，但不影响渲染输出。测试 12.16 和 12.50。另一个答案基本相同：他们都告诉使用 line-height 元素！
@user 因为你就是这样做的。我想这是浏览器错误或缺乏对该 CSS 规则的支持。可能应该作为一个单独的问题提出。
当然，在这里询问解决方法是题外话...顺便说一句，我看到它会影响其他浏览器品牌：它存在于使用 DOM 设置设置或 contenteditable=" true" 存在。

【解决方案3】：

您不能在 CSS 中使用 line-height 设置段落间距，<p> 块之间的间距。而是设置段落内行间距，即<p> 块内的行间距。也就是说，行高是排版者在段落内的行间行距，由行高控制。

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

【讨论】：

你不能为 inter-<p> 间距使用边距吗？
在某些情况下，margin-top 和/或margin-bottom 可以有效地完成此处所需的操作。

【解决方案4】：

如果你想要压缩线，你可以为font-size和line-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 */
}

【讨论】：

【解决方案5】：

试试这个属性

line-height:200%;

或

line-height:17px;

使用增大和减小音量

【讨论】：

@AVD ：它在基于 Presto 的 Opera 中不起作用。我需要一个解决方法...拜托！ :\

【解决方案6】：

我不确定这是不是你的意思：

line-height: size;

【讨论】：

【解决方案7】：

试试line-height属性；有很多方法可以指定行高

【讨论】：

【解决方案8】：

是的，正如大家所说，line-height 就是这样。您使用的任何字体，中等高度的字符（例如 a 或 ■，不通过上或下）应该在 line-height: 0.6 到 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>

【讨论】：

【解决方案9】：

lineSpacing 用于 React Native（或原生移动应用）。

对于网络，您可以使用letterSpacing（或letter-spacing）

【讨论】：