line-height的繼承性，height line-height 背景填充的方式

原創

2020-02-21 01:51

一定義：line-height 屬性設置行間的距離（行高）。
normal 默認。設置合理的行間距。
number 設置數字，此數字會與當前的字體尺寸相乘來設置行間距。
length 設置固定的行間距。
% 基於當前字體尺寸的百分比行間距。
inherit 規定應該從父元素繼承 line-height 屬性的值。

注意數字可以直接被繼承，然後在計算行高，而百分比是先計算出行高，在以px繼承

二行高可以繼承，但是不同的元素繼承的特點稍微有點不同

.one {
        height: 300px ;
        width: 300px;
        border: 50px solid black ;
        line-height: 150px;
    }
<div class="one">
    <div class="two">這個其實很簡單</div>
</div>

a 對於浮動元素 position ：absolute fixed ; display :inline-block 生成的行內塊元素，可以直接繼承行高，內容區是由行高撐開的（在沒有設置寬高的情況下），

浮動元素
.two {
float: left;
background-color: pink;
}

或者定位 position ：absolute fixed

.two {
        position: fixed;
        position: absolute;
        background-color: pink;
    }

或者display :inline-block

.two {
        display: inline-block;
        background-color: pink;
    }

b 對於塊級元素也是一樣的，可以直接繼承行高，內容區是由行高撐開的（在沒有設置寬高的情況下），只不過塊級元素可以“繼承”父元素的寬度。（在沒有設置寬高的情況下）

c 對於行內元素其實也是可以繼承行高的但是內容區卻只有內容撐開，設置寬高都是沒有效果的，背景同樣不會填充line-height區域。

    .two {
        display: inline;
        background-color: pink;

    }

三 height line-height 和背景填充的關係，在 .two 盒子加一個 height: 50px; 屬性之後，

height: 50px;

對於所有元素（浮動元素 position ：absolute fixed ; display :inline-block ；生成的行內塊元素；塊級元素），可以直接繼承行高，~~內容區是由行高撐開的~~ ，在設置寬高的情況下，內容是由高度決定的，這個時候，背景填充（content+padding+boeder 此時只有content(width+height)區域）
內容是由height撐開的 line-height只能影響行框內的元素佈局，並不會撐開盒子！
*按優先級來理解的話，
1 如果一個盒子想被撐開，在沒有設置height line-height 的時候，盒子會被內容撐開，
2 在沒有設置 height 但是設置了 line-height的時候，盒子會被line-height撐開（其實盒子的高度本來就不是被內容撐開的，本來就是被line-height或者height撐開的，詳情參見鑫神博客http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/）
3 在設置了height之後，其他的都是白扯，line-height只會影響佈局，背景不會填充到line-height範圍內，只會填充盒模型 content + padding + border