关于line-height的三两理解

FuChenRenShen

于 2018-09-19 14:18:36 发布

阅读量295

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： line-height css IFC

本文链接：https://blog.youkuaiyun.com/FuChenRenShen/article/details/82771235

css 专栏收录该内容

15 篇文章

订阅专栏

本文深入探讨了CSS中line-height与vertical-align属性在实现文本垂直居中时的应用及区别。通过对这两个属性的理解与实践，揭示了它们如何共同作用于内联元素以达到近似居中的效果，并讨论了在不同场景下height与line-height之间的相互影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说句实话，IFC这一块儿的东西真的有点难搞，刚开始是门儿都看不到，到后来用line-height做多了，又牵扯到了vertical-align，再到后来合起来用都实现不了效果，再到逐渐去理解IFC，现在也没理解得很明白。

认识line-height和vertical-align是从垂直居中对齐开始的，垂直居中本质是什么？那就是文字的基线问题，当你正确使用了line-height和vertical-align时，内联元素就能达成近似的居中效果，因为实际上还是有所区别的，存在line-height（非数值）时，设置vertical-align: middle,那么内部文字可以近似居中（实际上是文字总会多下沉一点）。

页面设计的时候，也或多或少发现了很有趣的问题，那就是height、line-height的问题，当二者都存在时，height所主导的元素高度是不会收到line-height的影响的，line-height所影响的仅仅是内部文字的垂直方向上的排版，而出现height: auto或者不设置height时，line-height就撑起了元素高度，内部文字也就会一直垂直居中。