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元素设置为块级元素，就不会存在默认间距了。
更多解决方案请参考