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 (两倍于font-size值)。

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

我假设下面就是你的问题想要达到的效果。如果我误解了您的意思，请告诉我，并澄清您的问题。

​

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

​

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

Answer 2

除了行高css属性之外，您的代码是完全正确的。您不能以像素为单位给出它。输入的行高属性值必须不带'px‘。简单地写下：

你的代码：

line-height:60px;

将其转换为：

line-height:6;

这就是了：

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

• 注意不要输入keep smaller value