vertical-align真的理解了么

<div class="box">
    我是div我是div我是div我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div我是div我是div我是div
</div>

此时在浏览器运行这段代码就会出现折行，如果未折行可以在增加文字，这时候div的高度是由所有文字的行高所撑起来的。

<div class="box">
    我是div我是div我是div<span class="inner-box"></span>我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div我是div我是div我是div
</div>

style {
    .inner-box {
        display:inline-block;
        width:100px;
        height:100px;
    }
}

接下来我们在文字里面添加一个span元素并给其样式如上所示，此时div元素中第一行的高度不在是第一行文本的行高 高度，效果如下：

 这时候我们引入行盒的概念，行盒可以有多行，一个div元素中可以存在多个行盒，行盒是要包裹当前行所有的内容。

 

以下案例div中只有一个行盒，行盒要包裹所有元素那变成了如下效果

    div {
      background-color: black;
      color: #fff;
    }
    span {
      display: inline-block;
      background: red;
      width: 100px;
      height: 100px;
    }
  <div>
    我是普通的文本
    <span></span>
  </div>

 

你会发现下方出现了像素问题，并不是只有图片下方才会有3像素问题，问题的产生是因为行盒要包裹当前行所有内容，但这时候文本和span之间默认是基于baseline对齐的，span就会偏上一点点因为是基于字母x去对齐的，这时候只要我们给span一个vertical-align为bottom就会解决或者top或者middle

vertical-align: baseline/ top/ bottom/ middle

是设置给行内块元素的