Question

我想将span行之间的空间设置为15px，但是当我使用line-height时它不起作用，我用chrome扩展测量空间，它不等于15px。

<div class="test">
<span style="line-height:15px;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</span>
</div>

结果： enter image description here

Answer 1

这就是你要找的东西。我添加了一个p元素，因此CSS可以识别这个文本块。

<div class="test">
<span>
  <p style="line-height:25px;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  </p>
</span>
</div>

Answer 2

您的代码似乎正常运行。请记住，行高不会影响字体大小，但会影响文本前后的有效间距（这就是chrome中的DOM查看器显示高度未更改的原因）。

这是一个突出显示正在发生的事情的片段。

.test {
   background-color: blue;
}

.test > span {
   line-height: 125px;
   color: white;
}

<div class="test">
<span>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</span>
</div>

Answer 3

您的代码正在运行。你可能只是错了。

<div class="test" style='width:50px'>
  <span style="line-height:1; font-size:15px">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  </span>
</div>

line-height将取无单位的值作为字体大小的倍数。它是每条线所占据的空间。

Answer 4

线盒＆＃34;属于＆＃34;包含块元素 - 在您的情况下为.test元素，并且跨度等内联元素在换行符中分成多个内联框，然后将这些部分放入行框中。

因此，在.test元素的每一行上，都有一个零宽度的内联框，称为strut和跨度的一部分。跨度的行高为15px，但是支柱的行高由.test元素确定。

由于您不更改字体系列，字体大小或垂直对齐方式，因此从一条线的顶部到下一条线的距离只是支柱的线高和线高的最大值。跨度。

默认字体大小，字体系列和行高将使支柱的线高约为18到19像素，因此您看到的间隙比预期的要大。

因此，要减小线条之间的间距，请减小支柱的线高以及跨度的线高，您可以通过设置包含块的线高来实现。然后span元素可以继承它。即使用：

＆＃13;

body { width:200px; } /* for demo to make multiple lines */

.test {
    line-height: 15px;
}

＆＃13;

<div class="test">
<span>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</span>
</div>

＆＃13;

行返回不工作时空间之间的CSS空间

4 个答案: