div高度比包含的img元素高出3px的问题

问题描述

写css的时候遇到了一个小问题div只包含一个img元素，但是页面展示上div却比img高出一点。当时只觉得匪夷所思...找了半天自己样式的问题...情况如下图

      <!-- html部分 -->
      <div class="header-pic">
        <img class="" :src='headPic' />
        <div class="linear-bg"></div>
      </div>

//less代码
  .header-pic {
    position: relative;
    border-radius: 10px 10px 0px 0px;
    width: 100%;
    
    img {
      width: 100%;
      background-size: cover;
    }
    .linear-bg {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 100%;
      background: rgba(51,51,51,0.10);
    }
  }

问题原因

后来查了一下资料，发现img元素后面会跟一个空白符，会使它的高度多出3px
至于为什么img元素后面会出现3px的空白呢～？因为img元素是行内元素，行内元素默认会有3px的间距。因此当我们的块级元素div包含这个行内元素的时候底部就出现了3px的间距。感谢@梦雨依依！

解决方案

设置img为display:block,空白就消失啦～～～
因为将img元素设置为块级元素，就不会存在默认间距了。
更多解决方案请参考