前言
写这篇技术博客时恰好看到饥人谷的任务6。拿到第一道题，是说line-height有什么作用。题目很短，看似简单——好吧，本着一副学究样，不查不要紧，一查吓一跳。其中牵扯到的知识点还是很多滴。teren君不辞辛劳地在综合各种资料的基础上做了一番整理和修改，最终完成并分享给饥人谷的小伙伴们饕餮大餐一顿，希望各位看完后觉得还行，点个赞呗！
-
默认行高下的文本效果
- 设置行高为字体大小的文本效果
- 文本层次解析
- 内容区域
- 行内框(inline box)
border=10px和line-height=110px下的行内框
border=10px和line-height=90px下的行内框
【tip】
- 行内框是无法直接显示的，只能通过border侧面烘托出行内框区域
- 行内框的高度就是行高
- 经笔者亲测，当只设置字体高度而不设置行高的情况下，原则上行内框是等于字体高度的，但是在chrome浏览器会出现行内框增大的现象，具体解释可能如第二张图所示：
另一种解释是：浏览器在显示的时候往往会有自己的表现形式，例如在Opera内，行高将按照CSS定义的将行距除以2增加到内容区域的上下两边，而IE和Firefox则不是完全平分
- 行框(line box)
- 行框就是
所有行高当中的最大值构成的行内框
- 行框就是
- 行高（line-height）
所谓的行高就是等于行与行间的基线距离的文本高度，具体演示如下：
【写在后面的话】
由于Teren君才疏学浅，刚入门前端不久，如有错误和缺失之处，请老师和同学不吝赐教。
