Question

如果我增加span元素内容的行高，则每行的上下空间会增加。但如果我将线高减少到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>

Answer 1

行高是其字体大小的乘数。假设，如果您将字体大小设置为12px，那么设置为1.5的行高等于12*1.5=18px。

关于具有块级元素的行高的事实按预期工作，但是对于内联级别元素，行高不能低于其字体大小。因此，将行高设置为低于1的值无效，因为0.5*12=6px小于字体大小。

如果您希望其行高可以低于其字体大小，那么您需要将其样式显式设置为块级别：

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

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

在内容由内联级元素组成的块容器元素上，“line-height”指定元素中线框的最小高度。最小高度包括基线上方的最小高度和其下方的最小深度，就像每个线框以零宽度内联框开头一样，其中包含元素的字体和线高属性。我们称这个想象的盒子为“支柱”。

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

总结：

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

Answer 2

如果您想使用跨度，则需要设置display: block

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

Answer 3

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

＆＃13;

p{line-height:1px;}

＆＃13;

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

＆＃13;

Answer 4

试试这个

 p{line-height:1px;}

您可以在行高

中使用像素（px）

Answer 5

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

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

Answer 6

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

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

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

为什么我们不能为span元素设置小于1的行高？

6 个答案: