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