html - CSS 行高 - 仅底部

Question

好的，我是前端开发的新手，所以如果这是一个愚蠢的问题，请多多包涵:)

我知道这可能是不可能的，但是当将 line-height 应用于元素时，例如 h1，line-height 应用该元素的 top 和 bottom 都有额外的空间。

这是有道理的，但我只想将 line-height 应用于元素的底部，这样我的 h1、h2 等的顶部就可以了与其他元素完美搭配。

这个 jsfiddle 显示了问题:http://jsfiddle.net/zja4c/1/

这个 jsfiddle 显示了我想要实现但被迫使用负边距:http://jsfiddle.net/25UTA/

background colour 为红色的 h1 与左侧 div 的顶部正确对齐，但文本没有对齐。

因此，我的问题是，有没有办法:

1. 仅将 line-height 应用于元素的底部，或者，

2. 将元素对齐到通过以某种方式应用 line-height 创建的空间的顶部

Answer 1

如果您希望在换行符之间保持适当的间距，使用 line-height 是您唯一的选择。正如您所指出的，填充将出现在 block 级 H1 元素的底部。我认为负边距是你最好的选择，但你必须微调它与 50px line-height 完美对齐:

http://jsfiddle.net/25UTA/1/

如果由于某种原因不能使用负边距，您可以使用相对定位和负的 top 值来实现类似的效果。

http://jsfiddle.net/25UTA/2/

使用 em 或百分比字体大小和行高可能会更容易。