17. CSS基线_前端工程师开发手册

基线是排版上的一种名词，是指大部分字母所“坐落”其上的一条看不见的线，每条基线之间形成基本的基线网格。但是在web中，当我们需要垂直对齐的时候，基线往往让人失望，比如line-height属性。

基线对齐其实就是指英文字母a、i、n、s这些字母的底部 ，它跟中文字符的底部的含义是不同的。我们再看一下实测：

<div class="box1">
    哈哈
  </div>
  <div class="box2">
    呵呵
  </div>
<style>
    .box1 {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: red;
      color: white;
      font-size: 48px;
    }
  
    .box2 {
      display: inline-block;
      width: 50px;
      height: 50px;
      background-color: blue;
      color: white;
      font-size: 16px;
    }
  </style>

这时候的对齐方式是没什么问题的（浏览器默认字符大小16px）再我先来改变一下字符的大小看看，将.box1的字符改为48px：

.box1 {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: red;
      color: white;
      font-size: 48px;
    }

可以看到两个盒子文本距离底线有明显的不同，那么更换下盒子字符看看？

这时候可以看到很明显的区别，这就是基线对齐。那我再来看看不改变文字大小，改变文字的行数看看：

<div class="box1">
    哈哈哈哈哈哈哈哈哈哈哈哈
  </div>
  <div class="box2">
    呵呵
  </div>

这说明文字的基线对齐是相对于最后一行文字来说的！那对于这种情况，如果我们想自定义垂直方向上的对齐方式改怎样呢？在CSS中有个属性vertical-align是设置垂直方向上的对齐方式的，我们只需要在同一行的任一个选择器，或者父亲节点的样式上设置改属性即可。

.box1 {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: red;
      color: white;
      vertical-align: top;
    }

vertical-align 可能的值的列表如下：

参考地址：https://blog.csdn.net/weixin_43324314/article/details/106894148