html - 如何将行高设置为字体大小加上整个元素的固定值

Question

我必须为整个现有元素调整行高。规范是所有行高应该是 font-size + 4px。

有什么简单的方法可以使用 scss 来完成这个任务吗？

根据百分比进行调整会很简单，但固定值让我失望。

我还可以全局设置它，而不必为更改字体大小的每个类设置它。

Answer 1

是的，有很多方法可以做到这一点:

1. $fontSize 是在px 中定义的静态值:

$fontSize: 12px;

$lineHeight: $fontSize + 4;

1. 您的font-size 值是动态的，必须在运行时计算:

line-height: calc(1em + 4x);

---

示例使用 calc ;

p {
  font-size: 14px; background: yellow;
}

.lh {
  line-height: calc(1em + 4px);
}

<p class="lh">Hello World</p>