CSS样式：line-height、height与font-size的联系

1.基本概念

类似于之前小学写字学习的四线三格，分为顶线（top）、中线（middle）、基线（baseline）、底线（bottom）。
（1）行高是指文本行基线间的垂直距离。
（2）行距是上一行的底线和下一行的顶线之间的距离。
行距的一半就是半行距。上间距等于下间距。
（3）字体大小是同一行的顶线和底线之间的距离。

从图中可以看出：
行高=行间距+字体大小=上半行距+字体大小+下半行距

2.font-size和line-height的关系

HTML结构：

 <div>美丽的中国<br />
    	中国很美丽
    </div>


  * 1
  * 2
  * 3

（1）当font-size等于line-height时，即行间距为0；

div{
	text-align:center;
	background:pink;
	font-size:30px;
	line-height:30px;
	}   


  * 1
  * 2
  * 3
  * 4
  * 5
  * 6

效果如图：

（2）当font-size大于line-height时，即行间距为负值，文字会杂糅在一起。

div{
	text-align:center;
	background:pink;
	font-size:50px;
	line-height:30px;
	}   


  * 1
  * 2
  * 3
  * 4
  * 5
  * 6

效果如图所示：字体变大，元素高度不变。

（3）当font-size小于line-height时，行间距大于0，上下文字之间有间距。

div{
	text-align:center;
	background:pink;
	font-size:15px;
	line-height:30px;
	}   


  * 1
  * 2
  * 3
  * 4
  * 5
  * 6

效果如图所示：

3 line-height和height的关系

CSS中起高度作用的应该就是height以及line-height。height是用来设置标签元素的高度。
以一个div为例，来进一步讨论两个问题：
第一个问题：如果不设置div的高度时，是div的font-size决定了div的高度还是line-weight的值。下面采用代码进行说明：

<div class="demo">测试</div>


  * 1

（1）字体大小值部位0，行高为0；

.demo{
	text-align:center;
	border:1px solid blue; 
	background:pink;
	line-height:0px; 
	font-size:20px;			 
	}
效果：


  * 1
  * 2
  * 3
  * 4
  * 5
  * 6
  * 7
  * 8

增加字体大小，只有字体大小变，元素撑不起高度，不显示。
（2）行高一定，字体大小为1；（给0就不能体现字的存在）

.demo{
	text-align:center;
	border:1px solid blue; 
	background:pink;
	line-height:40px; 
	font-size:1px;			 
	}


  * 1
  * 2
  * 3
  * 4
  * 5
  * 6
  * 7

效果如图：

增大字体大小，元素不改变。增加行高数值大小，元素高度增加。说明在未设置元素高度时，设置行高会撑起父级的高度，且文字垂直居中。
第二问题：div的height与line-height的大小关系不同时，会有什么显示结果呢？

<div class="demo">测试</div>


  * 1

（1）当height=line-height时：

.demo{
	text-align:center;
	background:red;
	font-size:18px;
	width:300px;
	height:100px;
	line-height:100px; 		 
	}


  * 1
  * 2
  * 3
  * 4
  * 5
  * 6
  * 7
  * 8

效果如图：

（2）当height<line-height时：

.demo{
	text-align:center;
	background:red;
	font-size:18px;
	width:300px;
	height:70px;
	line-height:100px; 		 
	}


  * 1
  * 2
  * 3
  * 4
  * 5
  * 6
  * 7
  * 8

效果如图：

（3）当height>line-height时：

.demo{
	text-align:center;
	background:red;
	font-size:18px;
	width:300px;
	height:140px;
	line-height:100px; 		 
	}


  * 1
  * 2
  * 3
  * 4
  * 5
  * 6
  * 7
  * 8

效果如图所示：

总结：在给定元素高度时，高度等于行高，文字会垂直居中。当行高值减小时，字体会向上运动。当行高值增大时，字体会向下运动。