首頁 > 文章 > web前端 > CSS中line-height詳解（程式碼實例）

CSS中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>

為什麼div獲取到了高度，並不是由於文字撐起了高度，而是line-height撐起了div，比較一下兩端代碼

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

效果如下：

CSS中line-height詳解（程式碼實例）

.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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

看更多