并列元素设置display：inline-block

有时候我们设置相邻元素样式时，比如三个div块元素，我们想要让它在一行显示，当然除了定位，浮动之外我们可以设置他的display为inline-block,让它变成行内块进行一行显示。当然普通的行内元素我们有时候也会这样设置。下面的例子我们用div举例
如下

  
  
  
  
  


  

    
111111
    
2222
    
333
  

我们设置好便签的内容，我们理想的呈现状态是这样的：

期望正常显示状态

但我们真正写业务时，标签的数据是不可控的，不是像我们写demo那样数据是写死的，动态的数据有时我们也会出现标签内的内容为空的时候，这里我们将第二个item的内容置为空，看看效果是不是会变

    
111111
    

    
33333
  

此时显示的效果是

此时显示成这样

不甘心，再让第一个item内容变为空

前两个内容都为空

此时我们好像发现了什么，当相邻元素设置成display：inline-block，有数据的元素与没有数据的元素相邻，有数据的元素会发生偏移。似乎好诡异，查下资料发现：当元素display设置为inline-block,可以将对象呈递为内联对象，但是对象的内容作为块对象呈递。对象呈递为内联元素，而同一行内的内联元素默认是基于 baseline 对齐的，如下图

基线

图中的黑色线条就是我们所说的基线：为什么3个元素的方向不是相同的呢？为什么有内容的元素向下，而无内容的元素会向上呢？就此我们需要了解CSS渲染机制：对于一个inline-block元素，如果内部没有inline内联元素，或者overflow不是visible，则该元素的基线就是它margin的底边缘，否则就是元素内部最后一行内联元素的基线。
简单地就以上这种情况来说，没有内容的item会基于它的margin底边缘也就是它的下边缘对齐，而包含内容的item会基于其内部内联元素的基线对齐，所以会造成这种一上一下的情况。
了解清楚这些原理我们想想有什么方法可以解决以上问题。当然我们首先可以想到，还用啥inline-block,直接float浮动一下，问题瞬间解决，想到了浮动，当然我们也可以想到定位去解决；当浮动和定位对于上下文布局影响太大，当然你要说一句再清除浮动，这话我没法接，我只想说能不能少点代码，有简单的干嘛去复杂了写，我们可以改变vertical-align的属性，根据需求设置相关的值（top/middle/bottom），鉴于上面的实例我们试一下：

  .item {
      width: 150px;
      height: 200px;
      background: red;
      display: inline-block;
      vertical-align: top;
    }

此时的效果：

完美

有内容的和没内容的已经完美“平等”，没有“高低”