一、行高的字面意思

“行高“顾名思义指一行文子的高度。具体来说是指两行文子间基线间的距离。

基线是在英文字母中用到的一个概念，我们刚学英语的时候使用到的那个英语本子每行有4条线，其中底部第二条线就是基线，是a,c,z,x等字母的地边线。

————————顶线(top line)————————————————

——————————中线(middle line)————————————

————————————基线(base line)———————————

———————————————底线(bottom line)——————

vertical-align中有top,middle,baseline,bottom与之是有关联的，但是具体细节如何，浏览器差异怎样，我还是不是很清楚。

但是由于中午跟英文长得不一样，所以基线的说法就像老太太穿线一一对不上眼。你理解为底线之差也不为不可。只是定义一回事，表现则另一回事。

http://www.cnblogs.com/roucheng/

二、line-height与line boxes高度

先说一个大家熟知的现象，有一个空的div，

这是个看上去很简单的问题，是理解line-height非常重要的一个问题。可能有人会认为是：文子撑开的！文子占据空间，自然将div撑开。我一开始也是这样理解的，但是事实上，深入理解inline模型后，我发现，根本不是文字撑开了div的高度，而是line-height!哟证明很简单(如下测试代码):

css代码：

.test1{font-size:20px; line-height:0; border:1px solid #cccccc; backgroud:#eeeeee;}

.teset2{fon-size:0; line-height:20px; border:1px solid #cccccc; backgroud:#eeeeee;}

html代码：

结果：test1 div有文字大小，但是行高为0，结果div的高度就是个0；test2 div文字大小为0，但是有行高，为20像素，结果div高度就是20像素。这就说明撑开div高度的是line-height不是文字内容。

到底这个line-height行高怎么就产生了高度呢？在linline box模型中，有个line boxes，这个是看不见的。line boxes的工作就是包裹每行文字。一行文字一个 line boxes。例如”艾佛森退役"这5个字，如果它们在一行显示，你艾佛森再牛，对不起，只有一个line boxes罩着你；但是”春哥纯爷们“这5个字，要是竖着写，一行一个，那真是够爷们，一个字罩着一个line boxes，于是总计5个line boxes。line boxes什么特性也没有，就是高度。所以一个没有设置height属性的div的高度就是由一个line boxes的高度堆积而成的。

其实line boxes不是直接的生产者，属于中层干部，真正的活儿都是它的手下-inline boxes干的，这些手下就是文字啦，图片啦，span之类的inline属性的标签啦。line boxes只是个考察汇报人员，考察它的手下谁的实际line-height值最高，谁最高，它就要谁的值，然后向上汇报，形成高度。例如，取手下line-height最高的值.则line boxes的高度就是40像素了。

深入了解css的行高Line Height属性

什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

【转】css行高line-height的一些深入理解及应用

一.前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章,学到了不少东西,建议您看看. 这里,我也要讲讲我对line-height的一些理解,所讲解的东西绝大多 ...

CSS行高——line-height 垂直居中等问题

CSS行高——line-height   初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个sty ...

CSS行高--line-height

遇到的问题:在css中,不理解line-height:1与line-height:1px的区别 发现的过程:最近在学做一个网站的过程中,设置两行文字之间的行高时需要用到line-height,发现了这 ...

李洪强和你一起学习前端之(6)css行高,盒模型,外边距

李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法

CSS行高line-height的一些深入理解及应用

一.一些字面意思. “行高”大约是指:一行文字的高度.具体来说是指两行文字间基线之间的距离.基线是在英文字母中用到的一个概念,我们刚学英语使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a ...

CSS行高——line-height

初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那么简单,最近看了一些关于行高的知 ...

(转)CSS行高——line-height