p 中的空行。 line-height 似乎不起作用

Question

我正在尝试在 html 标题中的行之间添加空格： 我真的不知道我的问题出在哪里...... :-( html是：

.col1 {
  width: 10%;
  border: 1px solid red;
  display: inline-block;
}

.col2 {
  padding: 20px;
  width: 70%;
  border: 1px solid green;
  display: inline-block;
}

.col3 {
  width: 10%;
  border: 1px solid blue;
  display: inline-block;
}

.title {
  background-color: orange;
  font-size: 34px;
  line-height: 50px;
}

<div class=col1>a</div>
<div class=col2>
  <h2>
    <p class=title>
      long, longgfdfdg, long, longgfdfdg, long, longgfdfdg, long, longgfdfdg, long, longgfdfdg, long, longgfdfdg,
    </p>
  </h2>
</div>
<div class=col3>a</div>

https://jsfiddle.net/uvkqt7wj/

感谢您的宝贵帮助

Answer 1

如果您将行高的值设置为 font-size 值的倍数，那么您将从您的问题中得到我认为您想要的结果 -点高度。

所以你的字体大小是 34px。这是line-height: 1，所以要添加一个 34px 的空间，你有line-height: 2（字体大小值的两倍）。

您可以在此处设置任何不带单位的数字值，例如 line-height 1.5 即 (34px + (34px /2 ) )。

我假设以下是您试图通过您的问题实现的目标。如果我误解了你，请告诉我，并澄清你的问题。

.col1 {
  width: 10%;
  border: 1px solid red;
  display: inline-block;
}

.col2 {
  padding: 20px;
  width: 70%;
  border: 1px solid green;
  display: inline-block;
}

.col3 {
  width: 10%;
  border: 1px solid blue;
  display: inline-block;
}

.title {
  background-color: orange;
  font-size: 34px;
  line-height: 2;
}

<div class=col1>a</div>
<div class=col2>
  <h2>
    <p class=title>
      long, longgfdfdg, long, longgfdfdg, long, longgfdfdg, long, longgfdfdg, long, longgfdfdg, long, longgfdfdg,
    </p>
  </h2>
</div>
<div class=col3>a</div>

This article 关于 CSS Line-height 的实际工作原理也值得一读

Answer 2

您的代码完全正确，除了 line-height css 属性。 你不能以像素为单位。 line-height 属性值必须在没有 'px' 的情况下输入。 简单地写：

您的代码：

line-height:60px;

将其转换为：

line-height:6;

给你：

.title{
    background-color:orange;
    font-size:34px;
    line-height:3;
}

• 注意不要输入保持较小的值