好吧,我对前端开发很陌生,所以如果这是一个愚蠢的问题,请很好:)
我明白这可能是不可能的,但是当将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
应用于元素的底部,或者,
1.将一个元素与通过某种方式应用line-height
创建的空间顶部对齐
5条答案
按热度按时间jtjikinw1#
如果您希望在换行符之间保持适当的间距,则使用
line-height
是您唯一的选择。正如您指出的,填充将发生在块级H1
元素的底部。我认为负利润率是你最好的选择,但你必须微调它与50pxline-height
完美匹配:http://jsfiddle.net/25UTA/1/
如果由于某种原因不能使用负边距,则可以使用相对定位和负
top
值来实现类似的效果。http://jsfiddle.net/25UTA/2/
使用
em
或百分比字体大小和行高可能会使此更容易。cqoc49vn2#
这些答案都没有引用
display
设置为inline
的元素。Line-height
是引用inline
元素的设置。到目前为止,每个答案都提到了使用padding和margin,这不适用于inline
样式的文本。您可以使用
vertical-align
修改文本在其行内的位置。这里有一个链接到一篇文章,详细介绍了该属性及其工作原理:http://christopheraue.net/2014/03/05/vertical-align/
42fyovps3#
一个简单的解决方案是使行高为70%,并添加一点底部填充。
9ceoxa924#
就我所知,不可能使用css将
line-height
仅应用于bottom
。所以你可以像user1538100说的那样用
padding
试试。bqf10yzr5#
你可以完全忘记行高,使用padding-bottom:
fiddle