在html中分配line-height给span元素是错误的吗？

Question

在这个fiddle http://jsfiddle.net/qhsnX/3/中，您可以看到我只为span元素指定了100px的行高，但这也为span元素之后的文本指定了相同的行高。相同的代码：

​

#titleBox {
  margin: 0 auto;
  width: 350px;
  background-color: #6da662;
  height: 100px;
  color: #fff;
  font-size: 16.5px;
  font-weight: bold;
}
span {
  line-height: 100px;
}

<div id="titleBox"> <span>I have 100px line height. || </span> I have 0 line height</div>

​

不仅如此，我不能更改第一个span元素之后的其他span元素的行高。http://jsfiddle.net/qhsnX/4/

​

#titleBox {
  margin: 0 auto;
  width: 350px;
  background-color: #6da662;
  height: 100px;
  color: #fff;
  font-size: 16.5px;
  font-weight: bold;
}
#one {
  line-height: 100px;
}
#two {
  line-height: 10px;
  color: black;
}

<div id="titleBox"> <span id="one">I have 100px line height. || </span>  <span id="two">I have 10px line height </span>
</div>

​

这是html语言中的bug吗？

Answer 1

-用于表示行与行之间的行距，适用于块元素，而不适用于行内元素。您可以将span更改为div，也可以在css中使用"display:inline-block“属性