解决div里面img图片下方有空白的问题

产生空白的原因

img标签是行内块元素即默认是：display: inline-block，且行内块元素的
默认对齐方式是基线对齐即vertical-align: baseline
所以产生空白的原因是因图片底边与容器基线对齐了，留出了基线与底线的空白

解决空白方法

  <div class="pic-container">
      <img class="pic" src="~images/img1.jpg" alt="">
      <img class="pic" src="~images/img2.jpg" alt="">
  </div>

1.1：把图片父容器设置为flex布局

  .pic-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      .pic {
          width: 100%;
      }
  }

1.2：把图片变成块状元素

  .pic-container {
      .pic {
          display: block; //inline-block不可以
          width: 100%;
      }
  }

1.3：设置图片的vertical-align
修改为vertical-align: middle使其相对容器中部对齐即居中对齐，这样图片就会充满整个容器

  .pic-container{
      .pic{
          vertical-align: middle;
          width: 100%;
      }
  }

1.4：把图片父容器行高置为 0

  .pic-container {
      line-height: 0;
      .pic {
          width: 100%;
      }
  }

1.5：把图片父容器文字大小置为 0

  .pic-container {
      font-size: 0;
      .pic {
          width: 100%;
      }
  }