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

场景

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

去除间隙

  1. vertical-align按照bottom对齐

    img {
      vertical-align: bottom;
    }
    
  2. img变为block元素

    img {
      display: block;
    }
    
  3. 浮动img

    div {
      overflow: hidden;   /* 父元素触发BFC撑开 */
    }
    img {
      float: left;
    }
    
上一篇:footer不满一屏固定在底部,超过一屏跟随滚动


下一篇:html5+css3的神奇搭配