行高 line-height

本文详细探讨了lineheight在图片和文本居中对齐中的应用,指出其在不同场景下的局限性和效果。讨论了lineheight如何影响文字和内联元素的布局,以及在块级元素转换后对a标签点击区域的影响。同时,强调了lineheight在继承性和背景颜色显示上的特性,并提醒读者注意文字顶线和底线的概念。
摘要由CSDN通过智能技术生成

1.图片img的居中能用line height(也能用text align-center),但是图片在进行垂直居中时,是以基线进行对齐,所以很多时候看起来并不是居中对齐,所以这种方式不稳定。
2.line height居中时,只会将容器中的文字居中。
例如一个大盒子嵌套一个小盒子,小盒子里有文字。当给大盒子的line height设置为大盒子高度,小盒子里的文字会在大盒子中居中,但是小盒子位置不变。行高设置为小盒子高度,则文字在小盒子中居中。
3.line height属性可以继承
4.a标签的line height,当a标签转成块元素后,line height区域都是可以点击区域;如果不转块元素,那么可点击区域就是a标签大小的区域。
5.inline元素的高度是由line-height决定的,并不是文字内容撑开的。但是背景可设置颜色的区域是由文字大小决定的,和line-height大小无关。从顶线到底线之间的区域可以显示背景颜色。
注意:文字的顶线和底线不是文字的顶部和底部

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值