行高不設單位的好處 line-height:1.8

今天無意間看了到了line-height:1.8 感覺挺有意思的，然后翻了下行高的知識，發現還挺有文章的，不妨溫故而知新。

先回顧下：頂線、中線、基線、底線

vertical-align是元素的垂直對齊方式，也依賴於這些線，分別有top(頂線對齊)、middle(中線對齊)、baseline(基線對齊)、bottom(底線對齊)

行距與行高(文本行的基線間的距離)：

為了更方便在效果圖上測量行高數值，一般我會選擇文字底到文字底這方式測量，與上圖的高度是一樣的。

===================================================================================

 那么話說回來line-height:1.8這個有什么用呢？

行高是可繼承的，但繼承的是計算值，如：

<div style="background:#ddd;height:100px;line-height:180%;font-size:15px;">
                <p style="font-size: 30px">
                    中文 English<br/>
                    中文 English
                </p>
</div>

這里div的行高為180%*15px=27px

而p的行高為計算后的27px 而非180%*30px=54px

 

通過上面的例子我們知道文本之間的空白距離不僅僅是行高決定的，同時也受字號的影響，

如果繼承的是計算值，那么當元素內的文字字體尺寸不一樣的時候，就有可能造成字體的重疊，

為了避免這種情況，可以定義一個沒有單位的值作為縮放因子來統一控制行高，縮放因子是直接繼承的，而不是繼承計算值：

<div style="background:#ddd;height:100px;line-height:1.8;font-size:15px;">
                <p style="font-size: 30px;">
                    中文 English<br/>
                    中文 English
                </p>
</div>

這里的p行高就是1.8x30px=54px  ，也就是說跟下面代碼的效果是一樣的。

<div style="background:#ddd;height:100px;font-size:15px;">
                <p style="font-size: 30px;line-height: 54px">
                    中文 English<br/>
                    中文 English
                </p>
</div>