深入 CSS 的 line-height 与 vertical-align 属性

[nfssuzukaze]

1. 前置知识

1.1 组成一个完整的盒模型需要:

• content : 显示内容的区域
• padding : 包围在内容区域外的空白区域
• border : 包围内容和内边距的区域
• margin : 盒子最外部的区域

  1.2 字体的线

  

  1.3 content area 高度

  在同样的 font-size 下, 不同的字体其 content area 的高度不同, 具体的数值与字体设计时的参数有关, 这里不深入讨论

  1.4 inline-level element 的计算

  会被 vertical-align 改变对齐方式的元素, 在改变对齐方式的同时, 也可能会改变该行的行高

• inline :
  • baseline 是该元素里面的文本(假想字母 x )的下边缘线
  • 顶部是该元素 content area 的顶部
  • 底部是该元素 content area 的底部
• inline-block :
  • baseline :
    • 若该元素里没有内容, 则 baseline 的位置就是 margin-bottom
    • 若该元素里有内容, 且 overflow 的值为 visible 时, baseline 的位置就是里面最后一个内容元素的 baseline
    • 若该元素里面有内容, 且 overflow 的值不为 visible 时, baseline 的位置就是 margin-bottom
  • 顶部是该元素的 margin-top
  • 底部是该元素的 margin-bottom

2. vertical-align

2.1 vertical-align 的取值(主要)

• baseline : 默认值, 使元素的 'baseline' 与其父元素的 baseline 对齐
• top : 使该元素及其后代元素的顶部与对应的 line box 的顶部对齐
• text-top : 使对应元素的顶部与其父元素字体的 content area 的顶部对齐
• middle : 使元素的绝对中点与其父元素的 x 字体的交点水平平行, 而不是与 content area 的绝对中点水平平行
• text-bottom : 使对应元素的底部与其父元素字体的 content area 的底部对齐
• bottom : 使对应元素及其后代元素的底部与对应的 line box 的底部对齐

3. line-height

3.1 line-height 的取值

• normal : line-height 的默认值, 大部分时候都为 1.2 左右(参考MDN), 然而这并不是一个具体的数值, 根据字体的不同, 其取值也会有不同
• <number> : 设定一个数字, line-height 的具体值为 number * font-size, 大部分情况下, 这是设置 line-height 的推荐方法
• <length> : 直接设定 px , em 之类的值
• <percentage> : 通过百分数设定

在一个元素中, 我们可以将每行看作一个 line box 在一个 line box 中, 存在至少一个 inline box , 该 inline box 的高度为其对应的 line-height 而一个 line box 的高度为 max(任意一个 inline box 的顶端到任意一个 inline box 底部的距离)

正常情况下, line-height 都比 content area height 要大, 而其多出来的长度, 一半会加到 content area 的顶部, 另一半会加到 content area 的底部

4. 由 line-height 与 vertical-align 导致的问题

1. 当仅两个 span 在 div 中, 且 span 的 font-family 相同, line-height 相同时, 更改 font-size 会导致 div 元素的高度改变

1.1 原代码

  <div>
    <span class="first">xxx</span>
    <span class="second">xxx</span>
  </div>

div {
  margin: 40px;
  width: 400px;
  background-color: red;
}

div > .first {
  font-size: 50px;
  width: 100px;
  line-height: 100px;
  background-color: yellow;
}

div > .second {
  font-size: 50px;
  width: 100px;
  line-height: 100px;
  background-color: lightgreen;
}

1.2 将第二个 span 中的 font-size 变小

div > .seconde {
  font-size: 30px;
  width: 100px;
  line-height: 100px;
  background-color: lightgreen;
}

原因:

1. 由于 vertical-align 的属性默认是 baseline , 所以在同一行中, 两个 span 的 x 字母的 baseline 会对齐,
2. 但由于第二组的 x 的 font-size 相对较小, 那么自然其 content area 的高度会缩小,
3. 又由于 baseline 在 content area 中所处的位置偏下, 所以在 baseline 之下的 content area 高度的缩小幅度小于总缩小幅度的 1/2 而 baseline 之上的 content area 高度的缩小幅度大于总缩小幅度的 1/2,
4. line-height 多出来的值又会各分 1/2 分别添加到 content area 的顶部与底部
5. 所以就导致了这个 inline box 的顶部与底部都降低了
6. 所以就导致了这个 line box 的顶部不变(较大字体 inline box 的顶部) , 而底部降低(较小字体 inline box 的底部)
7. 故 line box 高度增高

解决方法: 将两个子元素的 inline-height 设置为相同的数值

2. 放一张图片或一个 inline-block 元素进没有指定高度的元素中, 会导致子元素底部还会有一点空隙

<div><span></span></div>

body {
  background-color: yellow;
}

div {
  display: block;
  margin: 20px;
  width: 500px;
  background-color: grey;
}

span {
  display: inline-block;
  height: 200px;
  width: 200px;
  background-color: #fff;
}

解决方法:

1. 将对应的子元素的 display 改为 block
2. 将对应的子元素的 vertical-align 设置为 middle 或 top 或 bottom
3. 将对应的子元素的 line-height 设置为 0
4. 将对应的父元素的 font-size 设置为 0