元素的高度是由什麼決定對於我們解決頁面顯示問題和佈局頁面都有很大的幫助。常規的操作表現是為一個區塊級元素設定height屬性，則其擁有了高度：
<style>
.test {
border: 1px solid #ccc;
height: 100px;
width: 100px;
}
</style>
<body>
<div class="test"></div>
</body>但是根據熟知，當我們不為元素設定height，而元素中有內容時，該元素依然獲取到了高度：
<style>
.test {
border: 1px solid #ccc;
width: 100px;
}
</style>
<body>
<div class="test">1</div>
</body>
為什麼div獲取到了高度，並不是由於文字撐起了高度，而是line-height撐起了div，比較一下兩端代碼
.test {
border: 1px solid #ccc;
width: 100px;
line-height: 100px;
}
</style>
<body>
<div class="test">1</div>
</body>效果如下：
.test {
border: 1px solid #ccc;
width: 100px;
line-height: 0;
}
</style>
<body>
<div class="test">1</div>
</body>#顯而易見的結果就是因為有了height所以有高度，沒有height則因為有了line-height而有了高度更多詳細的細節其實是因為 每一行文字 都有一個line boxes， 這些一個盒子自然撐起了父元素的高度。
同時，觀察上面的例子就能發現文字的中線和line-height的中線是在相同位置的，所以才有了常用的那套居中辦法：
<style>
.test {
line-height: 100px;
height: 100px;
}
</style>設定line -height和height相同數值則可以使得其中文字垂直居中
從結果來看確實如此，但是這句話不對，這句話多餘了幾個字，完全不需要設置height，只需要line -height就可以做到文字垂直居中了。
以上是CSS中line-height詳解（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
Draggin＆＃039;和droppin＆＃039;在反應中Apr 17, 2025 am 11:52 AMReact生態系統為我們提供了許多庫，所有庫都集中在拖放的相互作用上。我們有反應，反應，可愛dnd，
帶有背景折疊的嵌套梯度Apr 17, 2025 am 11:47 AM我可以說我經常使用背景折疊。 IT Wager IT幾乎從未在日常CSS工作中使用。但是在斯特凡·朱迪斯（Stefan Judis）的帖子中，我想起了它，
使用React Hooks使用requestAnimationFrameApr 17, 2025 am 11:46 AM使用RequestAnimationFrame進行動畫化應該很容易，但是如果您還沒有徹底閱讀React的文檔，那麼您可能會遇到一些事情
最好的（GraphQl）API是您編寫的APIApr 17, 2025 am 11:36 AM聽著，我不是GraphQL專家，但我確實喜歡與之合作。作為前端開發人員，它向我曝光數據的方式非常酷。它就像一個菜單
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
記事本++7.3.1
好用且免費的程式碼編輯器
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
WebStorm Mac版
好用的JavaScript開發工具
SublimeText3 Linux新版
SublimeText3 Linux最新版
