【基线,内容区, 行高/行间距,行距, 行内框,行框的 区分说明】

---

⑴ 基线

• 基线
  • 沿着 文本最底部的 一行线, 基线（base line）并不只是 汉字文字的下端沿
    • 若一行文本 有中文和英文，则基线会在 英文 ‘x’ 最底部。

---

• 行高、基线、顶线、中线、底线 示例图

  • 

---

• 元素框
  • 每个元素 都会生成 一个或多个 矩形框，这称为 元素框。

---

⑵ 内容区

• 内容区
  • 指 底线 和 顶线 包裹的区域
  • （行内元素 display：inline可以通过 background-color属性显示出来）
    • 各元素框中心 有一个 内容区，这个内容区 周围有 可选的内边距、边框和外边距。
    • 实际中 不一定看得到，但确实存在。
  • 内容区的大小: 根据 字体大小 font-size的值 和字数 进行变化。
    • 对于 行内 非替换元素 或 匿名文本 某一部分

      • 内容区的 高度:

        • 字体大小 font-size 值 确定了 内容区的高度。
          • 如果一个 行内元素 font-size:15px，则 内容区的高度 = 15px。
        • 内容区 就是一个框，而 每一个文字 都有它的 em框（em框 确定 内容区高度）。

      • 

---

⑶ 行高/行间距

• 行高/行间距（line-height）：
  • 包括 内容区 和 以内容区为基础 对称拓展的 空白区域，我们称之为 行高。
  • 一般情况下，也可以认为是
    • 相邻文本行 基线到基线 的 距离,中线到中线 的距离.(一个线,到另一个相邻行 相同的线,都是行高.)
    • 所以,很显然,内容区,一般是小于 行高/行间距的.
      • (区分 行间距和行距)
  • 元素居中时的行高: 让元素在指定区域内 上下居中: 行高 = 行距+font-size；
  • 行高和字体大小: 行高line-height < 字体大小font-size时, 将出现 行距为负数的情况，也就是两行文字 将部分重合。
    • 
    • 

---

⑷ 行距

• 行距：指相邻文本行间
  • 上一个文本行底线 和 下一文本行顶线之间的距离。
  • 行距 = 上行底线和下行顶线 之间的距离 （= 两个内容区之间的距离）
  • 行距 = 行高line-height - 字体尺寸font-size（=内容区高度=顶线和底线之间的距离）
    • = 行高和字体尺寸的 差值 = （上文本行的 行高-内容区高度）/2+（下文本行的 行高-内容区高度）/2。
    • 行距的分布: 将行距的值 / 2，分别增加到 内容区域的 上下两边。
    • 
    • 

---

⑸ 行内框

• 行内框:
  • 行内框 是一个 虚拟的 矩形框，无法 在页面中 显示出来。
  • 行内框 = 行高 = 字体大小(内容区) font-size+行距
    • 调整 行内框间距: 可以使用 水平内边距、边框和外边距 调整它们的间距。
      • 但是，垂直内边距、边框和外边距 不影响 行内框的高度。
    • 
    • 
• 行高≠ 行内框的 情况
  • 图片 和 行框,行高:
    • 高度大于行高的图片 会把行框 撑开
    • 此时，虽然 撑开了行框，却 不会影响 行高。
  • 图文的垂直对齐: 当行内 含有图片的时候，图片 和 文字的 垂直对齐方式 默认是 基线对齐.

---

⑹ 行框

• 行框
  • 虚拟的矩形框: 指本行的 一个 虚拟的矩形框，是 浏览器渲染模式中 的一个概念，并没有 实际显示。
    • 行框高度 等于本行内 所有元素中 行内框最大的值。
    • 一行 一个行框: 当有 多行内容时，每行 都会有 自己的行框。
  • 不同高度的 行内框: 一行文本中 会有 不同大小的文字，这就造成了 一行文本中有 不同高度的 行内框，见上图。
  • 行框 = 一行文本中 最高行内框的顶端 到 最低行内框的低端 之间的距离 = 所有行高中的最大值
    • 行框的高度 总是 足以容纳 它包含的 所有行内框。设置行高 可以增加 这个行框的高度。
      • 并且 下一行的 行框的顶端 挨着 上一行 行框的底端
  • 行内框的高度 决定了 行框高度
    • 
  • 行高的影响: 对行内框和行框,都是有影响的.

---

♣ 结束语 和 友情链接

• 参考文档
  • 行内框和行框的概念
  • 基线、行高、行内框、行框、vertical-align等概念理解
  • 深入理解 CSS 中的行高

---

• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
• 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

---

• 转载 请注明出处 ,Thanks♪(･ω･)ﾉ
  • 作者：Hey_Coder
  • 来源：CSDN
  • 原文：https://blog.csdn.net/VickyTsai/article/details/103000077
  • 版权声明：本文为博主原创文章，转载请附上博文链接！