CSS:line-height:150%與line-height:1.5的真正區別是什麼？
代碼：
& 父元素內容 & Web前端開發&
下圖是當line-height:150%的效果，父元素的行高為150%時，會根據父元素的字體大小先計算出行高值然後再讓子元素繼承。所以當line-height:150%時，字元素的行高等於16px * 150% = 24px：
下圖是當line-height:1.5em的效果，父元素的行高為150%時，會根據父元素的字體大小先計算出行高值然後再讓子元素繼承。所以當line-height:1.5em時，子元素的行高等於16px * 1.5em = 24px：
下圖是當line-height:1.5的效果，父元素行高為1.5時，會根據子元素的字體大小動態計算出行高值讓子元素繼承。所以，當line-height:1.5時，子元素行高等於30px * 1.5 = 45px：
line-height屬性的細節
與大多數CSS屬性不同，line-height支持屬性值設置為無單位的數字。有無單位在子元素繼承屬性時有微妙的不同。語法
line-height: normal | &有單位（包括百分比）與無單位之間的區別
有單位時，子元素繼承了父元素計算得出的行距；無單位時繼承了係數，子元素會分別計算各自行距（推薦使用）。參考資料- https://developer.mozilla.org/en-US/docs/CSS/line-height
- http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
其實區別就在於繼承的問題上。150%是根據父元素的字體大小計算出行高，並且子元素依然沿用這個計算後的行高。而1.5則是根據子元素自己字體的大小去乘以1.5來計算行高。另，1.5em等也是按照150%的情況來算的。
差別在於繼承性，使用百分比會計算line-height的值，然後以px像素為單位繼承下去，而1.5則是先繼承1.5這個值，遍歷到了各個標籤再計算去line-height的像素值，例如，你寫的一段話，內容文字是12px，標題是30px，給P加上lin-height:150%;結果就是行高都是18px，標題會疊到下面文字上。給P加上line-height：1.5，文字行高為18px，標題為45px。
問題的關鍵就在於繼承，無單位的會繼承後再計算，值是動態的，有單位的會算出來然後繼承，值是固定的！！！摺疊我吧！已經有大神回答了！
贊同了 @李天昭 的答案。很詳細。
我開始也沒搞清楚區別，看票數最高的答案沒看懂，自己根據他的條件，按照 line-height 四種不同取值寫了例子。
鏈接：Different value for line-height
截圖：
總結：line-height 四種不同取值
1. normal，父、子元素的行高由瀏覽器分別計算得到。
2. number，父、子元素根據各自的 font-size * number 計算得到行高。
3. length（帶有 css 單位，如 em，px 等），子元素直接繼承父元素的行高。
4. %，子元素直接繼承父元素的行高，父元素的行高根據自己的 font-size 計算得到。
對於本身來說， 沒區別。
對於子元素來說：
line-height: 1em; /* 計算後再繼承 */
line-height: 100%; /* 計算後再繼承 */
line-height: 1; /* 直接繼承 */
line-height: 20px; /*直接繼承 */
今天在看bootstrap源碼時，突然想到的，line-height:為什麼有的有單位和沒有單位，搜完資料才看到這裡，瞬間明白了，膜拜~~~
我是搬運工。深入了解css的行高Line Height屬性明白之後，來個拓展。css行高line-height的一些深入理解及應用 ? 張鑫旭
一直用em，有天發現不帶單位的數字，好奇，原來是繼承性的差別問題，漲知識了。
繼承的都是計算值（在不進行實際布局的情況下所算出的最具體的值）！一種是繼承了父級元素的font-size*150%。另一種是直接繼承了1.5，繼承後再計算自身的行高，為自身的font-size*1.5！
推薦閱讀：
※body上加上overflow:hidden為什麼沒形成BFC阻止body下移?
※margin-right值的計算疑惑？
※a:link/a:visited 為什麼優先順序比class高？
※到底該不該用 CSS reset？
※line-height:normal是怎樣計算的?
TAG:CSS |