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

标签：src   pre   display   情况   order   cal   vertica   alt   lang   

场景

由于行内元素默认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;
   }
   

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

标签：src   pre   display   情况   order   cal   vertica   alt   lang   

原文地址：https://www.cnblogs.com/Peter2014/p/13230468.html