我們知道行高是可以繼承的並且行高的單位有四種情況。
1具體像素值 如：line-height: 16px;
2 em
em是指當前標籤設定的字型大小，比如當前標籤字型大小是16px，那麼2em = 32px；
3 %
%與em一樣都是以當前標籤設定的字型大小為基準，比如當前標籤字型大小是16px，那麼line-height: 200%; 則字型大小為32px;
4什麼單位都不帶。
與%是一樣的，比如當前標籤字型大小是16px，line-height:2;則字型大小為32px;
先來看一個行高正常繼承的例子
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .one { font-size: 20px; line-height: 2; /*line-height: 200%;*/ /*line-height: 2em;*/ } </style></head><body><div class="one"> <div class="two">看看字型的大小</div></div></body></html>
在父元素裡不管設定line-height:2;line-height:200%; 或者line-height:2em;中其中那一種，都可以發現字型的行高變成40px.
如果我們給子項目div也設定字型為25px，父元素的行高為2em或者200%，行高依然是40px。
.one { font-size: 20px; line-height: 2em; /*line-height: 200%;*/}.two { font-size: 25px;}
那麼問題來了，如果我們父元素的行高為2(不帶單位)，那麼行高是否仍然為40px呢。
.one { font-size: 20px; line-height: 2;}.two { font-size: 25px;}
在瀏覽器中我們可以發現行高變成了50px
因此我們在設定行高的時候需要注意一下兩點：
1、在設定行高的時候，如果單位是em或者%，那麼將來行高會先計算出來結果以後再繼承給子項目。
2 、在設定行高的時候，如果單位是沒有單位，那麼將來行高會先繼承給子項目，然後再計算出行高。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
