0

我正在尝试在 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/

感谢您的宝贵帮助

4

2 回答 2

0

如果您将线高的值设置为该值的倍数，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>

这篇关于 CSSLine-height实际工作原理的文章也值得一读

于 2020-01-11T10:37:00.767 回答
-2

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

您的代码：

line-height:60px;

将其转换为：

line-height:6;

干得好：

.title{
    background-color:orange;
    font-size:34px;
    line-height:3;
}
  • 注意不要输入保持较小的值
于 2020-01-11T08:25:58.520 回答