CSS 里的 height 屬性與 line-height 屬性有什麼區別？

01-14

#nav ul li{ width:100px; line-height:35px; float:left; padding:0 10px; margin:0 10px; text-align:center; list-style:none;}
與
#nav ul li{ width:100px; height:35px; float:left; padding:0 10px; margin:0 10px; text-align:center; list-style:none;}

瀉藥

塊內布局規則

塊內height為auto時，高度為塊內行框累加高和其內普通流塊高之和
塊內height為非auto時，塊高為 height 指定高度

塊內行框布局（行內布局）規則

每一個行內元素會產生一個行內框；
行內框會在行框內橫向排列；
"line-height" 特性值指定了每個行內非替換元素生成的行內框的確切高度；行內替換元素的高度由 "height" 特性值決定；
文字在行內框中垂直排列，上下空隙用半差異填補；如果字型大小大於行內框則文字從上下方向上溢出行內框，並可能滲入到其他行框內（行框是永遠不會重疊的）；
"vertical-align" 特性值指定了每個行內框的垂直對齊方式；
行框的頂邊界是這一系列垂直對齊的行內框最高的頂邊框，底邊界是最低的底邊框。
行框的高度是頂邊界到底邊界的距離。

所以 line-height 是決定行框高度的因素之一

而 height 只是決定包含塊高度

line-height 不直接影響元素高度，而是影響文本每行的高度，如果元素內因換行而產生多行文本，那麼 line-height 對元素高度的影響也要乘上行數

height 是高度

line-height 是文字行高

按你這個例子來說，如果 li 裡面沒有任何內容，那麼只設置了 line-height 的高度將為 0（即看不見）。而設置了 height 的 li 即使沒有內容，高度也會是設置的高度。

昨天剛好學做導航條，發現的一點問題，給題主參考下。

如果是這麼寫的話：

div.nav2 li a {height: 40px;display:inline-block;text-align:center;

顯示出來是這樣的：

改用line-height後：

div.nav2 li a {line-height: 40px;display:inline-block;text-align:center;

文字就會豎直居中了：

看《精通CSS》4.4節的時候碰到這個問題=-=

作者使用line-height而不是height控制高度，達到了文本垂直居中的目的，這是因為「行高還有一個特性，叫做垂直居中性(css行高line-height的一些深入理解及應用 ? 張鑫旭)」

--------------------------------------------

height表示垂直高度，line-height表示文本行高，也就是從文字頂部到底部的距離，

試下這個就可以看到區別了：

.test1{line-height:20px;background-color:red;}

.test2{height:20px;background-color:green;}

&test1&test1&

&test2&test2&

效果圖：

可以看到紅色背景高度為100px

綠色背景高度為的50px

參考鏈接:

height/line-height區別的討論：html - height vs line-height styling

line-height詳解：css行高line-height的一些深入理解及應用 ? 張鑫旭

我也奇怪，line-height的高度是會把字居中，但是height的話什麼時候才用的？