如何覆盖父元素的行高

Question

我在更改子元素的行高时遇到问题。 我的目标只是将行高重置为正常值，而不是使用其父级的较高值。

a{ line-height:100px; }
a small{ line-height:10px; //or normal }

所以我希望small的行高正常，但它不起作用。

有什么想法吗？

Small Demo

Answer 1

使用：

small {
  display: inline-block;
  line-height: 1; /*or whatever you like.*/
}

您需要inline-block，因为<small>默认为内嵌，因此会继承其父级的行高。

Answer 2

这是更新的小提琴https://jsfiddle.net/pae871az/2/ 我刚刚添加了display:inline-block

.first small{
  line-height:normal;
  display: inline-block;
}