如何使 <p> 和 <span> 在 HTML 5 中具有相同的行高？

Question

如何在 HTML 5 中实现p相同span的行高？

.main-body-text {
  color: #666;
  font-size: 10px;
  font-family: robotolight, sans-serif;
  text-align: left;
  line-height: 14px;
}

JS小提琴

Answer 1

问题是p和span具有不同的display类型，由于行之间的隐藏空间而导致不同的行为。

如果您希望它们具有相同的类型line-height，请强制它们具有相同的类型：

display:inline; // or 'block' or 'inline-block'

JSFiddle 演示