vertical-align和图片下方空白问题

<style>
    .box1,.box2{
      display: inline-block;
      background-color:#f0f3f9;
      width:150px;
      height: 150px;
    }
  </style>

  <div class="content">
    <span class="box1"></span>
    <span class="box2"></span>
  </div>

两个盒子都没有内容时，能在一条水平线上

<div class="content">
    <span class="box1"></span>
    <span class="box2">x-baseline</span>
  </div>

当第二个盒子有text内容时，两个盒子无法对齐。

一个inline-block元素，如果里面没有inline元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。

box1里面没有内联元素，因此，基线就是容器的margin下边缘，也就是下边框下面的位置；而第二个框框里面有字符，纯正的内联元素，因此，box2的基线就是这些字符的基线，也就是字母x的下边缘了。于是，我们就看到了box1下边缘和box2里面字符x底边对齐的好戏。

说回vertical-align

vertical-align默认值是baseline, 也就是基线对齐。而基线是什么，基线就是字母X的下边缘。

经常碰到问题div里包含图片，父级没有指定高度的时候，图片下方有几个像素空白

<div class="content">
    <img src=".picc.png" alt="">
  </div>

    .content{
      width: 100%;
      background: blue;
    }
    .content img{
      width: 300px;
      height: 300px;
    }

原因图片的display属性默认是inline，而这个属性的vertical-align的默认值是baseline（基线）。所以就会出现上图的情况（图片底部出现一个小留白区域）。

解决方法

1.图片转为块元素  因为只有元素属于inline或是inline-block ，vertical-align属性才会起作用。 

img{display:block;}

2.图片对其方式改为中间对齐

img{vertical-align:middle;}

3.父级设置font-size:0   改变行高

4.父级设置line-height:0 改变行高

5.图片转为浮动

img{float:left;}

 

vertical-align属性

vertical-align: baseline;    /*默认。元素放置在父元素的基线上*/
vertical-align: sub;         /*垂直对齐文本的下标*/
vertical-align: super;       /*垂直对齐文本的上标*/
vertical-align: text-top;    /*把元素的顶端与父元素字体的顶端对齐*/
vertical-align: text-bottom; /*把元素的底端与父元素字体的底端对齐。*/
vertical-align: middle;      /*把此元素放置在父元素的中部*/
vertical-align: top;         /*把元素的顶端与行中最高元素的顶端对齐*/
vertical-align: bottom;      /*把元素的顶端与行中最低的元素的顶端对齐*/