line-height 百分比和數字的區別

admin發表於2019-05-10

關於line-height屬性的基本用法可以參閱CSS line-height 行高一章節。

此屬性百分比屬性值和實數屬性值非常的類似，當然兩者是有區別的，下面做一下介紹。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#top{
  width:300px;
  background:#CCC;
  line-height:2;
  font-size:12px;
  margin:5px;
}
#top > div{
  font-size:18px;
}

#bottom{
  width:300px;
  background:#CCC;
  line-height:200%;
  font-size:12px;
  margin:5px;
}
#bottom > div{
  font-size:18px;
}
</style>
</head>
<body>
<div id="top">
  <div>螞蟻部落一</div>
</div>
<div id="bottom">
  <div>螞蟻部落二</div>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201905/10/102647yga8gpa2aaizpbpp.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

一個採用百分比方式，一個採用實數方式，也可以說乘積因子方式，區別很明顯。

（1）.top的line-height屬性值設定為2，那麼它的行高就是2*字型大小=24px。

（2）.top的子元素也會繼承這個乘積因子2，那麼子元素的行高是2*字型大小=36px。

（3）.bottom的line-height屬性值設定為200%，那麼它的行高是200%*字型大小=24px。

（4）.bottom的子元素行高會直接繼承bottom元素的行高，而不是200%，所以子元素高度是24px。

相關文章