Html CSS 行高 - 仅底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11702690/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Line Height - bottom only
提问by
Ok, I am quite new to frontend development so please be nice if this is a dumb question :)
好的，我对前端开发还很陌生，所以如果这是一个愚蠢的问题，请多多益善：)
I understand that this may not be possible but when applying line-heightto an element say an h1, the line-heightapplies extra space to both the topand bottomof that element.
我知道这可能是不可能的，但是当应用line-height到一个元素时，比如 an h1，该元素line-height将额外的空间应用于该元素的top和bottom。
This kind of makes sense, but i only want line-heightto be applied to the bottom of the element so the tops of my h1, h2etc can be alined perfectly with other elements.
这种是有道理的，但我只想line-height应用于元素的底部，这样我h1, h2等的顶部可以与其他元素完美对齐。
This jsfiddle shows the problem: http://jsfiddle.net/zja4c/1/
这个 jsfiddle 显示了这个问题：http: //jsfiddle.net/zja4c/1/
This jsfiddle shows what i want to achieve but am forced to use negative margins: http://jsfiddle.net/25UTA/
这个 jsfiddle 显示了我想要实现的目标，但我被迫使用负边距：http: //jsfiddle.net/25UTA/
The h1with background colourof red aligns correctly to the top of the left div, but the text doesnt.
该h1用background colour的红色正确对齐到左侧的顶部div，但文字犯规。
My question is therefore, is there a way to:
因此，我的问题是，有没有办法：
Apply
line-heightto only the bottom of an element or,Align an element to the top of the space created by applying
line-heightsomehow
line-height仅适用于元素的底部，或者，将元素对齐到通过
line-height以某种方式应用创建的空间的顶部
采纳答案by Derek Hunziker
Using line-heightis your only option if you wish to maintain proper spacing across line-breaks. Padding will occur on the bottom of the block-level H1element, as you pointed out. I think negative margins are your best bet, but you'll have to fine-tune it line up perfectly with a 50px line-height:
line-height如果您希望在换行符之间保持适当的间距，则使用是您唯一的选择。H1正如您所指出的，填充将发生在块级元素的底部。我认为负边距是你最好的选择，但你必须微调它与 50px 完美对齐line-height：
If negative margins can't be used for some reason, you can use relative positioning and a negative topvalue to achieve a similar effect.
如果由于某种原因不能使用负边距，您可以使用相对定位和负值top来实现类似的效果。
Using em's or percentage font-sizes and line-heights might make this eaiser.
使用em's 或百分比字体大小和行高可能会使这更容易。
回答by Andrew
None of these answers reference elements with their displayset to inline.
这些答案都没有引用元素的display设置为inline。
Line-heightis a setting that refers to inlineelements. Every answer so far has referred to using padding and margin, which don't work with inlinestyled text.
Line-height是指inline元素的设置。到目前为止，每个答案都提到使用填充和边距，这不适用于inline样式文本。
You can modify the positioning of text within its line with vertical-align. Here's a link to an article that goes into copious detail about the property and how it works:
您可以使用 修改文本在其行内的位置vertical-align。这是一篇文章的链接，该文章详细介绍了该物业及其运作方式：
回答by Bob
A simple solution is to make the line-height 70% and add a little bit of bottom padding.
一个简单的解决方案是使行高为 70% 并添加一点底部填充。
p, h2 {
line-height:70%;
padding-bottom: 3px;
}
回答by Andy
回答by Prashobh
In my knowledge its not possible to apply line-heightonly for bottomusing css.
据我所知，line-height仅适用于bottom使用 css 是不可能的。
So you can try with paddingas user1538100 said.
所以你可以padding像user1538100所说的那样试试。
