Question

所以只有两种可能性。

1）如果line-height是两行之间的高度，那么一行的行高是多少？

2）如果行高是行的高度，那么如果我将行高设为0，那么什么都不应该可见？但正如您在行高0后的示例中所看到的，内容是可见的。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
p {
    line-height: 0;
}


</style>
</head>
<body>

<p>
First Line First Line First Line First Line First Line<br>
Second Line Second Line Second Line<br>
Third Line Third Line <br>
</p>


</body>
</html>

＆＃13;

哪一个是正确的？

Answer 1

正确的答案是第二个（部分!!）：line-height属性是每个文本行的高度，但如果行的内容溢出它，这将不会被隐藏，因为，默认情况下，html元素不会隐藏溢出其容器的内容。

如果你添加overflow: hidden，你就会有证据证明这一点。

.sampleText {
  font-size: 24px;
  line-height: 12px;
  overflow: hidden;
}

<p class="sampleText">This is a Sample Text!!</p>

正如您所看到的，line-height指的是行的高度，当我们添加overflow:hidden时隐藏了其他文本。如果缺少overflow: hidden，则文本将具有所有元素的默认属性html：overflow:visible。

如果line-height属性值大于font-size，则文本将垂直对齐，如下一个示例所示。

.sampleText {
  font-size: 24px;
  line-height: 40px;
  background-color: sandybrown;
}

<p class="sampleText">This is a Sample Text!!</p>

Answer 2

根据MDN

在块级元素上，line-height属性指定元素中线框的最小高度。

在未替换的内联元素上，line-height指定用于计算线框高度的高度。

这意味着，如果将其设置为块元素行<div>，它将定义其行框的高度。 Line-box的含义是块元素所具有的行的高度。

对于其他（内联）元素，如<span>，它将定义呈现的容器的行高（检查以下代码段中的最后一个div ）

div{
  border: 1px solid grey;
  display: inline-block;
  padding: 0px 4px;
}

span{
  border: 1px solid red;
  width: 50px;
  overflow: auto;
  display: inline-block;
}

.test1{
  line-height: 30px;
}
.test2{
  line-height: 50px;
}

<div class="test1"><span> Hello </span></div>
<div class="test2"><span> World </span></div>

<div>
  <span class="test1"> Test 2</span>
</div>

<div>
  <span class="test2"> Test 3</span>
</div>

<div>
  <span class="test1"> Test 4</span>
  <span class="test2"> Test 5 to test wrap</span>
  <span>this it to justify</span>
</div>

Answer 3

＆＃39;线高＆＃39;属性指定＆＃39; tall＆＃39;应该是一条线。它不会增加/减少字体大小，它只会说明文本将占用多少空间。如果它太低，在一个段落中，这些词会相互重叠。如果它太高，那话就会相距甚远。更多内容如下：http：//www.w3schools.com/cssref/pr_dim_line-height.asp

Answer 4

在块级元素上，line-height属性指定元素内线框的最小高度。

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

在网上搜索我发现行高是行的高度，但它总是呈现文本。

正如我在西班牙语网站上发现的那样，行高的标准值是1.0 t0 2.0（没有统一像px，pt ......）

Answer 5

第二个是真的。行高意味着一行的高度。

我有时会使用line-height属性将文本垂直居中于任何类型的元素中。

正如您在下面的示例中看到的那样;在第一个p中，line-height大于font-size，文本在行中垂直居中。

在第二个p中，line-height小于font-size，文本溢出该行。

在最后一个p中，line-height小于font-size，p的overflow属性设置为hidden，因此文本溢出且部分可见。

p#p1 {
  border:1px solid #ccc;
  font-size:12px;
  line-height:36px;
}

p#p2 {
  border:1px solid #ccc;
  font-size:36px;
  line-height:12px;
}

p#p3 {
  border:1px solid #ccc;
  font-size:36px;
  line-height:12px;
  overflow:hidden;
}

<p id="p1">
  Lorem ipsum Lorem ipsum
  </p>

<p id="p2">
  Lorem ipsum Lorem ipsum
  </p>

<p id="p3">
  Lorem ipsum Lorem ipsum
  </p>

Answer 6

CSS line-height property定义用于行的空间量，最常见于文本中。它经常与Photoshop和类似软件中使用的行间距（前导）混淆。

Leading是一个术语，用于描述文本中基线之间的距离。在定义前导的情况下，始终在文本下方添加空格。但是，在使用line-height属性时，空格总是在文本的上方和下方同等地添加。

可以使用 px，em，百分比和无单位值定义行高。使用行高的一个例子是：

div {
  Font-family: ‘Lato’, sans-serif;
  Font-size: 14px;
  Line-height: 2 // equals to 28px
}

在这里，我们看到您是否设置了行高而没有单位，结果是行高乘以的元素的font-size。

什么是css的行高？

6 个答案: