如何控制具有不同字体大小的非块级元素之间的行高？

Question

我有一个布局，我需要控制包装的非块级元素之间的行高：

<p class="payments"><small class="light">You Pay</small><abbr title="GBP">£</abbr>121.50<br><small>per month</small></p>

我想要达到的目标是：

我不想依赖于绝对定位，因为在下面需要清除这个元素，只需在他的段落上设置一个低行高就会产生一个突破其框的对象，请参阅下面的小提琴：

http://jsfiddle.net/mdHKy/2/

有什么想法吗？

Answer 1

您可以先给p height，然后将其line-height设置为该数量的一半（为2行）。

p.payments {
    line-height: 1em;
    height:2em;
}

然后将line-height的{​​{1}}设置为small，然后将其设为1em：

vertical-align

然后设置p.payments small { line-height:1em; vertical-align:top; } 的{​​{1}}：

vertical-align

JSFiddle example