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

2021-01-26 11:15

阅读:788

标签: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


评论


亲,登录后才可以留言!