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

Hey_Coder

已于 2024-12-11 15:00:30 修改

阅读量4.3k

点赞数 10

分类专栏：【CSS】文章标签：基线内容区行高行间距和行距行内框和行框的区别行间距和行距的区别

于 2019-11-10 18:13:02 首次发布

本文链接：https://blog.csdn.net/VickyTsai/article/details/103000077

版权

【CSS】专栏收录该内容

28 篇文章

订阅专栏

基线、内容区、行高/行间距、行距、行内框、行框的区分说明

⑴ 基线：小写 ‘x’ 的下边缘
⑵ 内容区：内容区高度 = font-size 大小
⑶ 行高/行间距：文字本身的高度 font-size + 行距 /文字上下的空白区域
⑷ 行距：行距（文字间的上下空白） = 行高 line-height - 字体大小 font-size
⑸ 行内框：行内框高度 = 行高 line-height
⑹ 行框：行框高度 = 多个行内元素行高 line-height 的最大值；行内框最大的行高；能包含所有的行内框）
♣ 结束语和友情链接

⑴ 基线：小写 ‘x’ 的下边缘

基线
- 沿着 文本最底部的一行线，基线（base line）并不只是汉字文字的下端沿；
  - 若一行文本有中文和英文，则基线会在 英文 ‘x’ 最底部。
  - 即基线通常是指小写字母“x”的下边缘，它是文本行的参考线，用于确定文本行的垂直对齐位置。

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

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

⑵ 内容区：内容区高度 = font-size 大小

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

⑶ 行高/行间距：文字本身的高度 font-size + 行距 /文字上下的空白区域

行高/行间距（line-height）：
- 行高：指的是一行文字的高度，包括 “文字本身的高度 font-size” 以及 “文字上方和下方的空白区域/ 行距”。
  - 行高决定了文本行与行之间的垂直距离；
  - 即内容区和以内容区为基础对称拓展的空白区域，我们称之为行高。
    - 所以，很显然，内容区一般是小于行高的；
- 行高和行间距：一般情况下，也可以认为行高指的是一行文本的基线到下一行文本基线的距离，即两行文本基线之间的垂直距离，所以也会被称之为“行间距”，即行间距是行高的别称。
  - 注：行间距到底是什么？
    - 行间距= 行高？：
      - 在 CSS 中，并没有一个专门的“行间距”属性。通常所说的行间距，有人认为实际上是指的行高 line-height 属性，它用于设置行与行之间的距离（两行基线之间的垂直距离，不是空白间距），也就是行高；
    - 行间距=行距？：
      - 也有人认为行间距指代行距（文本之间的空白，不含文字本身的高度）的，所以，说到行间距，在概念上会有一点混淆，但没有关系，因为 CSS 中也没有所谓的“行距”属性，只是概念和称呼上的区别。
      - 而我们只需要设置好行高 line-height 属性和字体大小 font-size 属性就能很好地设置文字大小，并调整好文字和文字之间的垂直距离；所以，即便分不清“行间距”到底指代什么，也完全不影响实际设置。
- 行高、字体大小、行距的关系：让元素在指定区域内上下居中时，
  - 行高line-height = 行距 + 字体大小font-size；
  - 行距（文字间的上下空白） = 行高 - 字体大小 = line-height - font-size ；
- 行高、字体大小和文字间垂直的空白距离：
  - 文字重合：行高line-height < 字体大小font-size时, 将出现行距为负数的情况，也就是两行文字之间不仅没有空白间隔，还会有一部分重合在一起。
  - 文字间有空白：只有行高line-height ＞字体大小font-size时，行距为正数，文字的上下才会多出一点空白间隔；
  - - 上图文字说明 “半行间距” = 一半的行距，是把行间距指代为行距了，而不是行高；
    - 黑色箭头指的是半行间距 = 半个行距 = 底线和行内框的垂直距离；
    - 行距 = 上行底线和下行顶线 之间的距离（= 两个内容区之间的空白距离）
      - 整个行距的组成顺序是：上行底线→ 行内框 → 下行顶线；

⑷ 行距：行距（文字间的上下空白） = 行高 line-height - 字体大小 font-size

行距：指的是相邻文本行之间的距离，不包括文本本身的高度，通常是由行高减去字体大小得出的。
- 行距（文字间的空白） = 行高 - 字体大小 = line-height - font-size ；
  - 即相邻文本行之间的距离，即指相邻文本行间上一个文本行底线和下一文本行顶线之间的距离。
  - 行距 = 上行底线和下行顶线 之间的距离（= 两个内容区之间的空白距离）
    - 整个行距的组成顺序是：上行底线→ 行内框 → 下行顶线
    - 上面半个行距 = 上行底线和上行行内框之间的距离；
    - 下面半个行距 = 下行行内框和下行底线之间的距离；
    - 上下行的行内框一般是紧挨着的，所以即便设置上下外边距margin 也不会增加上下行内元素之间的垂直距离；
      - 此处的阴影部分行间距 = 行距，不是行高；
      - 行距的分布：
        只看一行时，是将行距的值 / 2，分别增加到内容区域的上下两边，如上图 ↑。
- 行距 = 行高line-height - 字体尺寸 font-size（=内容区高度=顶线和底线之间的距离），如下图 ↓；
  - = 行距元素行高和字体尺寸的差值 = （上文本行的行高 - 内容区高度）/2 +（下文本行的行高 - 内容区高度）/2。
行距的计算：在 CSS 中，行距可以通过 line-height 属性来间接控制。line-height 属性定义了一行文本的高度，包括了文本本身的高度以及上下的空白区域（即行距）。
- 行距实际上是line-height减去字体大小（font-size）的差值，然后将这个差值平分到文本的上下两侧。
例：如果一个元素的字体大小 font-size 是16px，行高line-height 是24px，那么行距可以这样计算：
- 行距 = （line-height - font-size）
- 半个行距 = （line-height - font-size）/2 = （24px - 16px）/2 = 4 px；
- 这意味着在文本的顶部和底部各有 4px 的空间，这 4px 的空间就是行距的一部分。因此，行距通常是指行与行之间的空白区域，它影响着文本的可读性和整体的排版美观。

⑸ 行内框：行内框高度 = 行高 line-height

行内框：
- 行内框是一个虚拟的矩形框，无法在页面中显示出来。
- 行内框 = 行高 line-height= 字体大小(内容区) font-size + 行距
  - 调整行内框间距：
    - 水平距离：可以使用水平的内边距 padding、边框 border和外边距 margin 调整它们的水平间距。
    - 垂直距离：但是，垂直方向的内边距、边框和外边距不影响行内框的高度，即就算设置了也不会在垂直方向上挤走下一行的元素（因为是行内元素，只作用于行内）。
行高≠ 行内框的情况
- 图片、行框、行高:
  - 图片的高度大于行高时会把行框撑开；
  - 但，即便图片撑开了行框，却不会影响行高的值。
- 图文的垂直对齐: 当行内元素含有图片的时候，图片和文字的垂直对齐方式默认是 基线对齐.。

⑹ 行框：行框高度 = 多个行内元素行高 line-height 的最大值；行内框最大的行高；能包含所有的行内框）

行框
- 虚拟的矩形框：指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。
  - 行框高度等于本行内所有元素中行内框最大的值，即最大的行高。
- 一行一个行框：当有多行内容时，每行都会有自己的行框。
- 不同高度的行内框：
  - 一行文本中会有不同大小的文字，这就造成了一行文本中有不同高度的行内框，见下图 ↓。
- 行框的高度 = 所有行高的最大值 = 一行文本中最高行内框的顶端到最低行内框的低端之间的距离；
  - 行框的高度总是足以容纳它包含的所有行内框。设置行高可以增加这个行框的高度。
    - 并且下一行的 行框的顶端 挨着 上一行行框的底端；（文本之间的空白是行距）
行内框和行框的区别
- 行内框：是针对单个行内元素的，而行框是针对整行文本的。
- 行内框的高度：由字体大小和行距决定，而行框的高度则是由行内框中的最大行高决定，以确保所有行内元素都能被包含在内；
  - 即，行框的高度 = 所有行内元素中行高line-height的最大值 ；
- 例：下图中文字分别放在多个行内元素中，而行内元素文字“box”的行高line-height 最大，所以，这个行内元素的行高line-height 就是这一行的行框的高度；
- 默认的行高
  - 根据 MDN 的文档，如果没有明确设置行高 line-height 属性，大多数桌面浏览器的默认值约为 1.2，这取决于元素的 font-family 。这意味着，如果字体大小没有被明确设置，那么行高默认值通常是 字体大小的 1.2 倍。所以，即便没有设置行高，上下行的文字也不会重合在一起；