内容区域、行内框、行框和行高的详解

---

前言

写这篇技术博客时恰好看到饥人谷的任务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君才疏学浅，刚入门前端不久，如有错误和缺失之处，请老师和同学不吝赐教。