html - 分配 line-height 以跨越 html 中的元素 buggy ？

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>

不仅如此，我无法更改第一个元素之后的其他跨度元素的行高。 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

行高用于表示行间距，应用于 block 元素，不适用于行内元素。您可以将 span 更改为 div 或者可以在 css 中使用“display:inline-block” 属性