为什么我们不能为 span 元素设置 line-height 小于 1？答案

【问题标题】：Why can't we set line-height less than 1 for span element?为什么我们不能为 span 元素设置 line-height 小于 1？
【发布时间】：2018-05-31 04:42:24
【问题描述】：

如果我增加 span 元素内容的行高，那么每行上方和下方的空间都会增加。但是，如果我将 line-height 降低到 1 以下，那么什么也不会发生。以下是我正在尝试的代码；我更改了 span 的内联样式属性中的值

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<p>
<span style="line-height: 0.1">
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
</span>


<span>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
</span>
</p>

</body>
</html>

【问题讨论】：

你可以设置一个小于 1 的值。但是只有在包含块元素上设置的 line-height 更小才会有效果，否则 strut将为行高提供最小值。

标签： html css

【解决方案1】：

Line-height 是其字体大小的乘数。假设，如果您将 font-size 设置为 12px，则 line-height 设置为 1.5 等于 12*1.5=18px。

关于带有块级元素的 line-height 的事实正如您所期望的那样工作，但是对于 inline 级元素，line-height 不能低于其字体大小。因此，将 line-height 设置为低于 1 的值是无效的，因为 0.5*12=6px 小于 font-size。

如果你希望它的 line-height 低于它的 font-size，那么你需要明确地将它的样式设置为块级别：

span{
  display: block;/*or inline-block*/
  font-size: 16px;
  line-height: .5;/*equal to 8px*/
}

还有更多关于行高的知识。看w3c

在内容由行内元素组成的块容器元素上，'line-height' 指定元素内行框的最小高度。最小高度由基线上方的最小高度和基线下方的最小深度组成，就像每个行框都以具有元素字体和行高属性的零宽度行内框开始一样。我们称这个假想的盒子为“支柱”。

当元素包含以多种字体呈现的文本时，用户代理可能会根据最大字体大小确定“正常”“行高”值。

总结：

在内联级元素中，高度不能设置为行高不能低于其高度。

【讨论】：

"但是对于内联级元素，行高不能超过其字体大小"-- 可以。如果我在 span 元素中设置 line-height:2 ，则行高会增加。
对不起，我使用的术语是错误的。更正-exceed 单词与below。感谢捕获。
是的，你说过内联元素不能超过字体大小。
@user31782 我想在下面说，但错误地写了超出我已经更正的范围。
@user31782 - CSS 中用于正常流的大部分概念都来自Movable Type。行框是放置一行文本字符的区域。它的高度，即实际的行高，是允许包含所有字符和支柱（参见上面的引用）的最小高度，允许不同的字体大小、前导和垂直对齐方式。基线是用于垂直对齐的字体上的一个垂直位置，将每个字符分成一个上升（高于基线）和一个下降（低于基线）。

【解决方案2】：

如果你想使用跨度你需要设置display: block

<span style="line-height: 50%; display: block;">
  This is Sparta!<br>
  This is Sparta!<br>
  This is Sparta!<br>
</span>

【讨论】：

但它适用于跨度为line-height>1 的值。你可以自己试试。
我猜span 是一个内联元素。
如果它适用于 line-height>1 值的 span 那么为什么它不适用于 line-height
我用头撞墙了一个星期试图弄清楚这一点。谢谢！！

【解决方案3】：

为什么要将段落添加到 <span> 元素？我会这样做如下。这样你就可以控制所有的段落标签

p{line-height:1px;}

<p>

This is a paragraph with a standard line-height.</p>
<p>This is a paragraph with a standard line-height.<br>
<p>This is a paragraph with a standard line-height.<p>
<p>This is a paragraph with a standard line-height.<p>
<p>This is a paragraph with a standard line-height.<p>
<p>This is a paragraph with a standard line-height.<p>

【讨论】：

不，我只想知道span元素。
那么你有 3 个选项，1.使用 div 而不是 span，2.添加“display: block”强制它像块元素一样，或者 3.添加“display: inline -block” 使其表现得像块元素
但是为什么它对line-height>1的值适用于span？
如果添加 'display:block' 则项目读取的值小于 1。这是因为 line-height 的影响仅对内联元素。当 line-height 应用于 block、inline-block 或任何其他类型的非 inline 元素时，效果仅对 inline 后代元素起作用。
内联元素不符合行高等属性；它们采用最近的块父级的行高。因为它们继承了这些值，所以它们将其视为一个整数，这就是它无法读取的原因

【解决方案4】：

试试这个

 p{line-height:1px;}

您可以在行高中使用像素 (px)

【讨论】：

你们为什么不明白？我知道它适用于 block-level 元素。我在问它是否适用于 line-height>1 值的 span 那么为什么它不适用于 line-height
@user31782，您的问题并没有说，“我知道块级元素会实现这一点”，您用一种听起来像是在寻找解决方案的方式来表达您的问题！

【解决方案5】：

<span> 是内联元素，因此line-height 不会以您希望的方式应用。尝试将有问题的 span 设为块级元素，看看会发生什么，这是一个示例：

.test {
  display: block;
  line-height: 0.1;
}

<span class="test">
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
</span>

<span>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
</span>

【讨论】：

但是为什么它对 line-height>1 的值使用 span 呢？
@user31782，老实说，我不完全确定，我没有深入研究它，但正如您所见，行高对于内联和块级元素的行为不同。

【解决方案6】：

内联级元素与其父级密切相关。但是您可以尝试将 line-height 直接设置为此内联元素的块级父级。

.text-wrapper {
  line-height: 0.2;
}
.text {
  line-height: 0.2;
}

Codepen。看起来这个技巧有效。

【讨论】：