模拟行间距功能而不是行高的最简单方法

Question

让我用这张图解释我对line-spacing（我想模仿）和line-height之间差异的看法：

在这里，您可以在line-height > 1的容器中看到padding的文字。在文本的顶部和底部添加了一个额外的视觉空白，我想在这些行之间添加空格。

为什么我（和你）可能需要此功能，模仿line-spacing？因为如果此容器中的按钮或图像与line-height > 1的文本一起使用，则文本和图像看起来会不对齐。文本在顶部和底部添加了额外的空格，这使得文本边缘看起来离容器边界更远。

为避免这种情况，我手动为文本添加负边距：

 h1 {
    font-size: 30px;
    line-height: 42px; /* or 1.4 */
    margin: -6px 0 -6px 0; 
 }

那么问题是什么？

我非常依赖font-size像素。我需要在每次更改字体大小或行高后重新计算边距，我必须为h3，p计算它等等。

我正在寻找一些自动化的方法（我缺少一些魔法）。