CSS屬性line-height的完全指南

一、什麼是line-height？

在CSS中，line-height是一種用於控制行間距的屬性。它定義了行高（行框盒子的高度），且會同時決定兩行文字之間的距離。但需要注意的是，line-height並沒有直接控制文本的大小，而是控制行框盒子的大小。當一個元素沒有設置顯式的line-height時，這個屬性會默認繼承父元素的值。

為了探究這個屬性的細節，讓我們先看看一些值得注意的小細節。

二、關於取值

首先，line-height的取值是多樣的。你可以使用一些絕對單位比如px，或一些相對單位比如em或rem。同時，你也可以使用百分數來設置line-height，而這個百分數是依據於當前元素字體尺寸的。

    
div {
    line-height: 1.5; /* 值1.5表示1.5倍的字體大小*/
    line-height: 2em; /* 值2em表示行高是當前字體大小的2倍 */
    line-height: 200%; /* 表示當前元素的行高是字體大小的200% */
}
    

需要注意的是，line-height的繼承與其他CSS屬性有些不同。如果你不想讓一個元素繼承父元素的line-height，你需要設置該元素為具體的值，比如使用px單位。

三、行內元素和塊級元素

除了元素本身不同帶來的行高差異之外，行內元素和塊級元素的設置也會有所不同。行內元素中，如果設置了line-height，它將被設置為其父元素的line-height。而對於塊級元素，line-height通常在元素的padding區域內生效（詳見示例）。

    
p {
    line-height: 1.5;
    padding: 20px;
}

span {
    line-height: 1.6;
}

/* 通過這個例子可以看到，在塊級元素中設置行高通常跟padding屬性有關 */
    

四、文本對齊

除此之外，line-height還能影響文本對齊方式。具體來說，讓行高等於父元素的高度去控制文本的豎直居中。

    
.container {
    height: 200px;
    line-height: 200px; /* 如果父元素高度為200px，line-height設置為同樣的值時，文本就會實現垂直居中 */
    text-align: center;
}
    

五、解決子元素不居中的問題

如果你給一個元素設置了line-height，但是該元素的子元素（可以設置為塊級元素或行內元素）沒有居中，你可以使用vertical-align屬性來解決。具體來說，讓子元素的vertical-align屬性與父元素的line-height值相同，子元素就能像父元素一樣垂直居中。

    
.container {
    height: 200px;
    line-height: 200px;
    text-align: center;
}

.container span {
    display: inline-block;
    vertical-align: middle; /* 讓子元素的vertical-align屬性與父元素的line-height值相同，子元素就能像父元素一樣垂直居中 */
}
    

六、總結

在CSS中，line-height是個很有用的屬性，用於控制行高和行間距。取值多樣，可以使用各種單位和百分數，使用方法也很靈活，但需要注意它會對文本的對齊方式產生影響，同時也要注意行內元素和塊級元素的具體使用方式。

好了，既然我們對line-height的使用方法都已經掌握了，那趕快去試試吧！