關於CSS：line-height

時間 2019-12-10

標籤關於 css line height 欄目 CSS 简体版

原文原文鏈接

前言

先上結論：css

元素的高度是由什麼決定對於咱們解決頁面顯示問題和佈局頁面都有很大的幫助。常規的操做表現是爲一個塊級元素設置height屬性，則其擁有了高度：bash

<style>
  .test {
    border: 1px solid #ccc;
    height: 100px;
    width: 100px;
  }
</style>
<body>
  <div class="test"></div>
</body>
複製代碼

上述代碼表現爲： wordpress

可是根據熟知，當咱們不爲元素設置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的中線是在相同位置的，因此纔有了經常使用的那套居中辦法：spa

<style>
  .test {
    line-height: 100px;
    height: 100px;
  }
</style>
複製代碼

這裏再強調一點，之前說3d

設置line-height和height相同數值則可使得其中文字垂直居中code

從結果來看確實如此，可是這句話不對，這句話多餘了幾個字，徹底不須要設置height，只須要line-height就能夠作到文字垂直居中了。至此，前言三條結論都在本文中作出瞭解釋和觀察。cdn

這篇文章實際上是爲了使用原生HTML+JS+CSS實現折線圖作準備的會是一系列的文章，所有文章內容均爲參考張鑫旭博客內容本篇對應的博客地址爲：張鑫旭博客地址blog

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。