如何在 <p> <span> HTML 5 中制作并具有相同的行高？

Question

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

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