布语

该分享主题参阅自张鑫旭编写的《Css 世界》书籍第五章部分

字母 x 与基线#

在 Css 中基线的出现在一定程度上是为了解决字体排版问题，在 Css 中基线定义就和字母 x 有关，字母 x 的下边缘线就是基线.

x-height
x-height 算是在 css 中的一种概念并不是作为属性存在，x-height 通常来说是指小写字母 x 高度，也可称之中位线与基线之间的距离

在该图中看到有一个 midian 线，该线和我们在使用vertical-align: middle;中的 middle 线是不一样的，在规范中对于 middle 的大致为基线向上 1/2x-height的距离，近似与字母 x 的交叉点.
下面这张图是我暂时理解的 middle 线的位置，该线是通过将 line-height: 0; 时所观察到的。该线大概位置也可以通过 * text-decoration: line-through;* 观察到，并且这两条线的大致位置是同一个位置上

从 x 到 vertical-align#

vertical-align 该属性常用于进行基线对齐，可是在一些情况下可能会遇到的问题就是为什么该属性没有起作用，因为 vertical-align 进行对齐的基准是内联级元素。内联级元素的默认基线为 baseline, 该基线 baseline 就是采自于字母 x 的下边缘线，在使用到中文时或者其他文字时可能会碰到一种情况就是感觉没有对齐，那是因为中文和部分英文或者其他文字的下边缘线比 baseline 低，造成的视觉效果就是文字下沉效果，如下图所示

如果你想让更加对齐一些的话你可以使用 * vertical-align: -3px;* 进行手动调整底部对齐，但是当你调整的时候你应该明确的是调整的基准是基于 baseline 进行上下调整的，而且这种调整是具有精确性并且各家浏览器对于该属性的支持是不错的

内联元素的基石 line-height#

首先提出一个问题，那就是一个盒子究竟是靠什么撑开的？我最先开始的答案基本上就是由内容 (font-size) 撑开盒子，但是随着对参阅书籍的阅读和自己上手实践逐渐的对之前自己的答案产生了怀疑直到否定，我们从下面这个例子可以大致看一下.

为什么会第一感觉到盒子由内容 font-size 撑开的呢？

这就需要考虑到 line-height 的默认值的计算方式了。排除掉 font-family 对字体的影响，正常来讲 line-height 的默认值为 normal 即 1.2 左右，这个的值和需要根据浏览器进行具体衡量 (各浏览器可能有差异),

另一方面去探寻 1.2 就是代表着什么？是怎么基于什么进行计算？是怎么规范文字排版中行高的？
经过实验，这个值是根据自身元素的 font-size 值进行计算的 (注意: font-size 是具有继承性质的). 在规范文字排版中 line-height 规范需要看两方面：一方面是文本单行的情况，另一方面是文本多行的情况.

• 文本单行
  • 就个人理解来讲，单行情况 line-height 的主要体现在与对内容高度的支持
• 文本多行
  • 多行的情况 line-height 一方面体现每行文本的高度支持，另一方面就是在于每行元素距离下一行元素之间 baseline 的间距

这里为什么只是说了文本这种情况而没有讨论其他内联级元素中 line-height 的体现呢？
这里我们拿 img 元素作为一个例子进行分析，首先 img 元素默认情况下为一个内联级元素，但是 img 还有一个特点就是它是一个可替换元素，至于什么是可替换元素用一句话概括就是改变标签属性会影响到页面展示，我们这里就不展开讨论可替换元素和非可替换元素之间的差异化了。对于内联级可替换元素来讲 line-height 是不会影响到展示的大小，这里我准备了一个例子大家可以看一下

从该例子中我们可以看到确实line-height没有影响到img的高度, 那么随之带来的一个问题就是为什么box盒子现在高度为256px呢? 这个问题带来的一个概念就是幽灵空白节点的存在, 这个概念可能平时没有听过或者没有确切感受过其存在, 同样我准备了一个例子以证明幽灵空白节点的存在, 大家可以看一下 看完这个例子我们明显发现span没有内容但是为什么有了容器高度, 这就是幽灵空白节点的存在所导致的, 幽灵空白节点存在于Html5规范的文档中即页面头部标识了``````的文档, 并且我们可以通过上面的这个例子发现幽灵空白节点的几个特点: 1. 存在于内联级元素上 2. 表现如同一个内联级元素并且自身存在一个空白字符

为什么默认值 normal 为 1.2 左右呢？
经测在 Chrome 中 line-height 的默认值 normal 代表这 1.27 左右 (可能有误差), 我们可以看下图 line-height: 1; 情况下文字排版展示情况.

也可以直接通过 codepen 在线前往查看两者文字排版效果差别:

明确的发现在*line-height: 1;*情况下文字可能会出现上下行有重叠的情况(为什么会有这种情况请结合middle示意图和文本多行情况结合理解), 这样的文字排版一方面不利于阅读另一方面就是页面排版会显的拥挤不堪.

line-height 与 vertical-align#

line-height 和 vertical-align 两者主要的一种关系就是当你使用到 * vertical-align: 10%;* 的情况的时候你应该明确这个百分比是基于什么进行计算的，这个百分比就是基于 line-height 进行计算的，然后根据元素 baseline 对齐到父元素身上 baseline 给定的百分比.

应用#

图片空隙的产生及如何修正
下面用实例以及一些解决方法来说明这件事情

为什么图片下边缘会多出这几个像素的距离? 该间隙的产生由三个因素所影响的幽灵空白节点、line-height和vertical-align. 在上面的示例中我使用到了字母x的原因之一是用于替代幽灵空白节点让我们更加明显的看出其原因, 当前字体为16px, 在Chrome中line-height: normal中normal解析值大约为1.27, 我们可以计算出行高为20.32px经过四舍五入后为20px, 因为字体x的下边缘线至少距离容器边框的距离至少为2px(至少的原因是这个间距和字体有关)(ps: 半行间距, 这是页面排版中一个概念, 个人暂未涉猎), 我们可以通过手动移动vertical-align进行移动进行大致比对作为参考即可.

暂未涉猎 / 补充到的知识点#

1. 行距与半行距 => 有兴趣请看《Css 世界》5.2.1 部分
2. 深入理解 vertical-align => 有兴趣请看《Css 世界》5.3.4~5.3.8 部分