line-height用px和百分比的區別在于計算方式與適應場景。1.px是固定值，如line-height:24px，行高始終為24px，適合按鈕等需精確控制的組件；優點直觀可控，缺點不夠靈活。2.百分比是相對值，如line-height:150%，實際行高為當前元素font-size的1.5倍，適合正文等需自適應的文本；優點隨字體變化自動調整，缺點可能因繼承引發意外結果。3.直接寫數字如line-height:1.5，行為類似百分比但更穩定，推薦用于正文內容。選擇單位應根據具體需求：嚴格控高用px，響應式排版用百分比或無單位數值。
在css中，line-height 是控制文本行間距的重要屬性。當你用 px 和百分比設置 line-height 時，看起來都是在調整行高，但它們的計算方式和最終渲染效果其實有明顯差異。
px 是固定值，不受字體大小影響
使用 px 設置 line-height 時，你指定的是一個絕對數值。比如：
p { font-size: 16px; line-height: 24px; }
這里每行的高度就是固定的24像素，不管父元素或繼承鏈上的其他樣式怎么變化，它都不會自動調整。這種寫法適合需要精確控制高度的場景，比如按鈕、導航欄等 ui 組件。
立即學習“前端免費學習筆記（深入）”；
優點很明顯：直觀、可控、不容易出錯。缺點是不夠靈活，尤其在響應式設計中，如果字體大小變了，行高還得手動跟著調。
百分比是基于當前字體大小的相對值
而使用百分比時，line-height 的計算是相對于當前元素的 font-size 來進行的。例如：
p { font-size: 16px; line-height: 150%; }
這相當于 16px * 1.5 = 24px，結果和上面一樣。但如果你之后改了 font-size，比如變成 20px，那 line-height 也會自動變成 30px。
這種方式更適合文本內容較多、需要跟隨字體大小自適應的場景，比如文章正文、博客段落等。不過也正因為它是相對值，有時候會因為繼承問題導致實際顯示的行高和預期不一致。
使用百分比要注意繼承問題
比如你寫了這樣一個結構：
<div class="parent"> <p class="child">一段文字</p> </div>
然后 CSS 是這樣：
.parent { font-size: 14px; line-height: 150%; } .child { font-size: 18px; }
.parent 設置了 line-height: 150%，但 .child 自己設置了字體大小為 18px。這時，.child 的 line-height 不是 14 * 1.5 = 21px，而是根據自己的字體大小來算：18 * 1.5 = 27px。
這個特性有時會被忽略，特別是當你想統一控制多個層級的文字行高時，容易出現意料之外的結果。
什么時候用 px，什么時候用百分比？
簡單來說：
- 如果你需要嚴格控制高度，比如做組件、布局對齊、動畫過渡等，用 px 更穩妥。
- 如果你更關注可讀性和響應性，希望行高隨著字體大小自然變化，那就用百分比。
- 另外還有一種常見寫法是直接寫數字，比如 line-height: 1.5;，它其實是“無單位”的比例值，行為和百分比類似，但不會受繼承干擾太多，推薦用于正文類內容。
基本上就這些區別。理解清楚它們的計算機制，在不同場景下選擇合適的單位，就能避免很多排版上的坑。
