理解 line-height

Posted 2020-10-25 db-it

1.专有名词理解：

　　line-height（行高）：两条相邻基线之间的距离，有时为了方便，将相邻底线之间的距离作为行高

　　　

　　　

　　font-size（字体大小）：顶线到底线之间的距离

　　行间距：行高减去字体大小就为行间距，会平均分成两部分，顶部一份，底部一份

2.行间距的理解

　　（1）line-height为固定数值时：100px

　　　　

div{
    border: 1px solid red;
    line-height: 100px;
}
p{
    font-size: 30px;
    border: 1px solid black;
}


<div>
    <p>段犇</p>
</div>

子元素可以继承父元素的行高！

 

div{
    border: 1px solid red;
    line-height: 100px
}

<div></div>

若只设置行高，而没有子元素填充，只会是一条线

 

div{
    border: 1px solid red;
    height: 100px
}

<div></div>

注意height与line-height 的区别

 

　　（2）line-height的值为百分数时：

　　

div{
    font-size:50px;
    border: 1px solid red;
    line-height: 150%;
}
p{
    font-size:50px;
    border: 1px solid green;
}
<div>
    <p>段犇</p>
</div>

若父元素的line-height是百分数，则该父元素的行高为：line-height的值 乘以 父元素字体的大小，子元素会继承父元素的行高

若父元素未规定字体大小，而只规定行高，则会用默认的字体大小值 乘以 line-height的值

　　（3）line-height的值如1.5的无单位的小数

 　　

div{
    border: 1px solid red;
    line-height: 1.5;
}
p{
    font-size:50px;
    border: 1px solid green;
}

<div>
    <p>段犇</p>
</div>

当line-height的值无单位时，如1.5，则行高为：父元素的line-height值 乘以 子元素的字体大小

 

 

总结：通过上面的例子我们得知，文本之间的空白部分，不仅与行高（line-height）有关，还与字体（font-size）有关，

　　   第一种与第二种实质上是一样的，都是只与父元素有关；而第三种必须结合父元素与子元素