如何覆盖父元素的行高答案

【问题标题】：How to override line-height from parent element如何覆盖父元素的行高
【发布时间】：2017-08-23 12:43:09
【问题描述】：

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

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

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

有什么想法吗？

【问题讨论】：

您希望它如何工作？您希望<a>Some Text<small>Small Text</small>More Text</a> 看起来如何？整行的行高是否应该减少？

【解决方案1】：

用途：

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

你需要inline-block，因为<small>默认是内联的，所以会继承其父级的行高。

【讨论】：

【解决方案2】：

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

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

【讨论】：