css之line-height

文章讨论了CSS中line-height属性如何设置行间距,以及在继承过程中如何计算。当line-height带有单位(如px,%)时,子元素会继承一个具体的计算值;无单位时,会继承比例因子并根据自身的font-size重新计算。建议使用无单位的比例值来设定line-height,以确保预期的行间距效果。
摘要由CSDN通过智能技术生成

line-height
定义:line-height 属性设置行间的距离(行高),不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差(行距)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
在这里插入图片描述
line-height行高是可继承的,但并不是简单的copy父元素行高,继承的是计算得来的值。

<div style="border:dashed 1px #0e0;line-height:150%;font-size:10px;">
    <p style="font-size:30px;">
        1232<br/>
        123
    </p>
</div>

按一般理解既然line-height可以继承,那么p元素的行高也是150%了,可是事实是这样的
在这里插入图片描述
非但没有变成150%,反而连100%都没有,重叠了!这就是继承计算的结果,如果父元素的line-height有单位(px、%),那么继承的值则是换算后的一个具体的px级别的值;上例p得到的是10px*150%=15px的行高,而P的字体大小为30px,所以发生了重叠。

而如果属性值没有单位,则浏览器会直接继承这个“因子(数值)”,而非计算后的具体值,此时它的line-height会根据本身的font-size值重新计算得到新的line-height 值。

<div style="border:dashed 1px #0e0;line-height:1.5;font-size:10px;">
    <p style="font-size:30px;">
        1232<br/>
        123
    </p>
</div>

在这里插入图片描述
所以在使用line-height时,尽量使用倍数设值

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值