Css lineheight 行高

本文详细介绍了CSS中行高的概念及其不同单位的计算方式,并探讨了行高对文字显示效果的影响,包括如何通过设置行高实现文字的垂直居中。

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

浏览器中: 默认文字大小为16px

默认行高 默认18px

行高= 文字大小+上间距+下间距

 ◆设置的行高,改变的是文字上下间距
 ◆影响行高的因素:
           ■文字大小。
           ■文字字体。(font-family)
☞作用:
           ◆让文字在标签中垂直居中(设置行高值等于标签的高度即可)
           ◆行高只能影响文字(图片,其他标签都不受行高影响)

行高单位(了解)

 ☞px:    px单位最常使用。       
☞em
☞百分比
☞不带单位

 给单独一个标签设置行高

行高单位| 行高值 | 文字大小 | 最后的行高值
    px         40px   16px     行高=设置的行高值
    em    2em     16px     行高=设置的行高值*文字大小
 百分比  200%    16px    行高=设置的行高值*文字大小
 不带单位   2     16px    行高=设置的行高值*文字大小

1.3   给父元素设置行高,子元素的行高情况

父行高单位| 父行高值 | 子文字大小 | 最后子行高值

  Px       20px       16px      行高=父元素的行高(继承性)
  em      2em       16px    行高=父元素的行高*父元素的文字大小

 百分比     200%     16px    行高=父元素的行高*父元素的文字大小(先计算后继承)

 不带单位     2     16px     行高=父元素的行高*子元素的文字大小(先继承,后计算)


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值