高度與線條高度造型

處理文字永遠不會超過一條線時，使用這兩種文字有什麼區別？它們都可以在屏幕上產生類似的結果，從我可以看到的有關元素頂部或底部的元素。爲什麼要使用行高？身高會更有用。高度與線條高度造型

編輯：從文本中的一個div創建這個程式化按鈕的一個例子。這絕不會是多行的。那麼爲了兼容性的原因需要行高？或者我不知道的任何事情？

謝謝！

height是容器的垂直測量值。

line-height是從第一行文本的頂部到第二行的頂部的距離。

如果只有一行文字的使用，我期望他們能夠產生在大多數情況下類似的結果。

我使用height當我想明確地設置容器大小和line-height印刷佈局，它可能是相關的，如果用戶調整文本大小。

2011-09-30 22:23:14

校正。行高與第二行文本的位置無關，僅基於內聯框本身。 – Rob

這是另一個帶有[css-tricks]（https://css-tricks.com/almanac/properties/l/line-height/）例子的教程，如果這樣做更有意義。 –

對於你引用（從來沒有包裝，以多行）行高度將垂直居中文本的情況下，實際的目的。儘管用戶最終控制字體大小，但請注意這一假設。

2011-09-30 22:22:30 steveax

如果將文本包裝在div中，給div一個高度，並且文本增長爲2行（可能是因爲它正在像手機這樣的小屏幕上查看），那麼文本將與元素重疊在它下面。另一方面，如果您給div一個行高並且文本增長到2行，則div將展開（假設您不給div一個高度）。

這裏是一個fiddle演示這一點。

2011-09-30 22:33:24 DwB

在閱讀[this]之後登陸SO（https://github.com/csswizardry/CSS-Guidelines）。 DwB的答案應該有更多upvotes。 –

假設文本比容器更小：

設置在容器上的行高指定在其內部線盒的最小高度。對於1行文本，這會導致文本在容器內垂直居中。

如果您在容器上設置高度，則容器將垂直增長，但它裏面的文本將開始它裏面的第一個（頂部）行。

2016-03-03 12:28:59

高度 = 行高 +填充頂+填充底部

2017-12-28 21:19:44

回答