理解 line-height

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）有關，

　　   第一種與第二種實質上是同樣的，都是隻與父元素有關；而第三種必須結合父元素與子元素