css之line-height_div line-height-CSDN博客

本文链接：https://blog.csdn.net/qq_46302247/article/details/128898041

文章讨论了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时，尽量使用倍数设值