CSS中height和line-height的区别

CSS中height和line-height的区别

height：一般用于设置某一控件具体的高度

<div style="height: 40px;" >
	创建一个height为40px的div盒子
</div>

line-hright：一般用于设置控件中字体所占的具体高度。

<div style="line-height: 40px;" >
	设置一个div盒子的line-height为30px
</div>

        当一个父容器中存在两个不同的子容器时，因为子容器中控件的不同可能会存在两个子容器中的不能对齐的现象。

        如上图所示，在搜索框为一个父div盒子，在该div盒子中左侧为input文本输入框右侧为子div盒子存放文本，而该子div盒子无法正好放入父容器中，是因为左侧输入框的输入的字体与右侧子div中字体为同一高度，右侧字体位置默认在容器的左上角所以才照成了改情况。

        只需对子控件添加line-height，设置字体的line-height使其与父控件的高度一样即可解决。该方法主要原理是将字体所占用的范围设置为父容器高度即避免了字体居于左上角的情况。