关于inline-block对齐的问题

0. 问题

• 被问了这样一个神奇的现象，几个并排的inline-block元素放一块的时候，有内容的元素和无内容的元素不能在垂直方向上对齐
• 自己验证一下 ：

<div class="con">
  outer text
  <div>han</div>
  <div></div>
  <div>
    han <br>han <br>hanhanhanhan
  </div>
  <div>
    han <br>han han han <br><br><br>han
  </div>
  <div>
    gaara han <br><br><br>hello
  </div>
  <div>han</div>
</div>

.con{
  border : 1px solid red;
  position : relative;
}
.con>div{
  width: 150px;
  height: 100px;
  display : inline-block;
}
.con div:nth-child(1){
  background-color : red;
}
.con div:nth-child(2){
  background-color : blue;
}
.con div:nth-child(3){
  background-color : green;
}
.con div:nth-child(4){
  background-color : pink;
}
.con div:nth-child(5){
  background-color : gray;
  position : absolute;
  top : 0;
  right : 0;
}
.con div:nth-child(6){
  height : 50px;
  margin-bottom : 10px;
  background-color : brown;
  overflow : hidden;
}

• 效果(堪称奇葩) ：

  
  

1. 解决

• 网上搜一下，找到了inline-block是关于基线对齐的，但并不知道基线的具体位置
• 在stackoverflow上找到了这个回答
• 根据上面的回答，设置元素的vertical-align属性为top即可

2. 提取一些有用的信息来帮助理解 :

2.1. 关于属性vertical-align :

• 该属性用来设置inline与table-cell元素在竖直方向上的对齐方式，默认值为baseline
• 该属性对于块级盒子无效
• 因为是垂直方向的对齐是相对于父级元素来说的，所以其设置的值代表了该元素相对于其父级如何对齐，如 ：
  当vertical-align:baseline时，该元素会将自身的基线(baseline)与其父元素的基线对齐,同理当vertical-top时，该元素会将自身的顶部与其父元素的顶部对齐
  默认的值为baseline,它将当前元素的基线与其父元素的基线对齐
• MDN --- vertical-align

2.2. 关于基线(baseline)

因为我们使用中文时没有基线的设定(基线概念源于西文字体)，所以要花点时间了解一下基线，才能准确的理解上面示例中的对齐的奇怪现象

• 上面回答中说到，基线是一条位于多数字母之下、字体的降部(descender)之上的线
  
  偷一张wiki的图
• wiki百科 --- 基线
• 知乎 --- 中文到底有没有基线（baseline）的概念？

2.3. inline元素的基线

• 通过上面的说明，我们就可以理解inline元素的基线，理解其相对于基线对齐的原理了

<div class="con">
  outer text
  <span>gaara han</span>
  <span>bigger gaara han</span>
  <hr>
  no text : <span></span>---<span>1</span>
</div>

.con{
  border : 1px solid red;
  height: 300px;
  font-size : 30px;
  padding : 20px;
}

span:nth-child(1){
  border : 1px solid green;
}
span:nth-child(2){
  border : 1px solid blue;
  font-size : 60px;
}
span:nth-child(4){
  border : 1px solid pink;
}
span:nth-child(5){
  border : 1px solid pink;
}

• 可以看到，不管字体大小，inline元素的基线始终与父元素的基线对齐(观察那些没有降部字母的底部)
• 而第二行说明了，即使元素内部没有文字，也会根据元素字体大小的属性来进行基线的对齐

2.4. inline-block元素的基线

从上面的说明来看，基线是对于单行文本来说的，而inline元素多用来写单行文本，那写在inline-block元素中的多行文本呢

• 回答中也有对应的说明：
  
  inline-block元素的基线，是它在文档流中的最后一个行级盒子的基线，除非
  它没有在文档流中的行级盒子，或者它自己的overflow属性被设置为visible之外的值，这两种情况时，它的基线是它自己margin-bottom的边缘
• 这样便可以理解上面我最初展示的例子了
  1. 首先确定父元素基线的位置：找到其最后一个在文档流中的行级盒子(粉色)
  2. 确定找到的元素的基线，因为该元素有内容，因此基线为其最后一行文本的基线
  3. 父元素基线的位置确定后，再确定其他几个inline-block的基线，将它们的基线对齐, 这些盒子的位置也就确定了
  • 红色盒子只有一行文本，基线就是这行文本的基线
  • 蓝色盒子没有文本，基线就是盒子的margin-bottom
  • 绿色盒子有多行文本，基线就是最后一行文本的基线
  • 灰色盒子脱离了文档流，默认位置是按基线对齐，但设置了top值，因此紧贴着父元素的上部
  • 棕色盒子设置了overflow属性，基线为margin-bottom（从控制台选择该元素可以看到margin）
  4. 有了对齐方式后，元素以该对齐方式绘制出来，并且为了不让文档流中的盒子溢出父元素，父元素的高度进行了自适应，顶部包裹了蓝色盒子，底部包裹了红色盒子，且文本下移。就形成了我们看到的样子

圆满解决 ！