CSS行高-仅底部

vsikbqxv  于 2023-06-07  发布在  其他
关注(0)|答案(5)|浏览(330)

好吧,我对前端开发很陌生,所以如果这是一个愚蠢的问题,请很好:)
我明白这可能是不可能的,但是当将line-height应用于一个元素,比如h1时,line-height将额外的空间应用于该元素的topbottom
这是有道理的,但我只希望line-height被应用到元素的底部,这样我的h1, h2等的顶部就可以与其他元素完美地对齐。
这个jsfiddle显示了这个问题:http://jsfiddle.net/zja4c/1/
这个jsfiddle显示了我想要实现的但被迫使用负边距的内容:http://jsfiddle.net/25UTA/
带有红色background colourh1与左侧div的顶部正确对齐,但文本没有对齐。
我的问题是,有没有办法:
1.仅将line-height应用于元素的底部,或者,
1.将一个元素与通过某种方式应用line-height创建的空间顶部对齐

jtjikinw

jtjikinw1#

如果您希望在换行符之间保持适当的间距,则使用line-height是您唯一的选择。正如您指出的,填充将发生在块级H1元素的底部。我认为负利润率是你最好的选择,但你必须微调它与50px line-height完美匹配:
http://jsfiddle.net/25UTA/1/
如果由于某种原因不能使用负边距,则可以使用相对定位和负top值来实现类似的效果。
http://jsfiddle.net/25UTA/2/
使用em或百分比字体大小和行高可能会使此更容易。

cqoc49vn

cqoc49vn2#

这些答案都没有引用display设置为inline的元素。
Line-height是引用inline元素的设置。到目前为止,每个答案都提到了使用padding和margin,这不适用于inline样式的文本。
您可以使用vertical-align修改文本在其行内的位置。这里有一个链接到一篇文章,详细介绍了该属性及其工作原理:
http://christopheraue.net/2014/03/05/vertical-align/

42fyovps

42fyovps3#

一个简单的解决方案是使行高为70%,并添加一点底部填充。

p, h2 {
  line-height:70%;
  padding-bottom: 3px;
}
9ceoxa92

9ceoxa924#

就我所知,不可能使用css将line-height仅应用于bottom
所以你可以像user1538100说的那样用padding试试。

bqf10yzr

bqf10yzr5#

你可以完全忘记行高,使用padding-bottom:
fiddle

相关问题