html - 根据高度计算航向边距

Question

我有一个 line-height: 22px 的正文，我想使用 line-height: 26px 的标题。另外，我定义了 margin-bottom: 18px 来保持垂直节奏。但是，如果标题包含 2 行，则需要重新计算其边距(在我的例子中:14 = 66-26*2)。

如果可以，纯css怎么实现？

谢谢。

Answer 1

如果我答对了你的问题，无论内容如何，​​你的容器的左上角应该总是与之前的相距 66 像素？

然后只给有问题的容器 66px 的高度，没有任何边距？

h1 {
    line-height:22px;
    height:66px;
    border: 1px solid red; /* visibility purpose */
    margin:0px;
}

<h1>foo</h1>
<h1>bar<br/>baz</h1>
<h1>foo</h1>
<h1>foo</h1>

这看起来像是第二个标题的“重新计算的边距”。(如果我为可见性目的添加的边框被删除)

https://jsfiddle.net/qbvdorwn/