關於CSS：line-height
阿新 • • 發佈：2018-11-29
前言
先上結論：
- 如果為塊級元素設定height則其擁有高度
- 如果沒有為塊級元素設定height元素中有文字且為該元素設定line-height則其擁有高度
- 在第二種情況下文字的水平中線與塊級元素的line-height中線是同一條（同一高度）
正文
元素的高度是由什麼決定對於我們解決頁面顯示問題和佈局頁面都有很大的幫助。 常規的操作表現是為一個塊級元素設定height屬性，則其擁有了高度：
<style>
.test {
border: 1px solid #ccc;
height: 100px;
width: 100px;
}
</style>
<body>
<div class="test" 上述程式碼表現為：
<style>
.test {
border: 1px solid #ccc;
width: 100px;
}
</style>
<body>
<div class="test">1</div>
</body>
複製程式碼直觀表現為：
.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" 同時，觀察上面的例子就能發現文字的中線和line-height的中線是在相同位置的，所以才有了常用的那套居中辦法：
<style>
.test {
line-height: 100px;
height: 100px;
}
</style>
複製程式碼這裡再強調一點，以前說
設定line-height和height相同數值則可以使得其中文字垂直居中
從結果來看確實如此，但是這句話不對，這句話多餘了幾個字，完全不需要設定height，只需要line-height就可以做到文字垂直居中了。 至此，前言三條結論都在本文中做出瞭解釋和觀察。
結尾
這篇文章其實是為了 使用原生HTML+JS+CSS實現折線圖 做準備的 會是一系列的文章，全部文章內容均為參考張鑫旭部落格內容 本篇對應的部落格地址為：張鑫旭部落格地址