CSS 去除图片和父元素底部间隙

场景

由于行内元素默认vertical-align按照基线(base-line)对齐，而父元素的border-bottom对应着行内元素的底线(bottom)，所以默认情况下图片会与父元素产生底部间隙。

去除间隙

1. vertical-align按照bottom对齐

   img {
     vertical-align: bottom;
   }
   

2. img变为block元素

   img {
     display: block;
   }
   

3. 浮动img

   div {
     overflow: hidden;   /* 父元素触发BFC撑开 */
   }
   img {
     float: left;
   }